import { Image, Pressable, Text, View } from "react-native";
import React from "reactn";
import { responsiveWidth } from "../actions/responsiveSizes.js";

import { icons } from "../assets";
import { Fonts, Style, gutters } from "../styles";

import { Routes } from "../navigation";
import { navigate } from "../navigation/NavigationService";

import useLayoutType, { sidebarWidth } from "../hooks/useLayoutType.js";
import useNotifications from "../hooks/useNotifications";

export default ({ title = "", containerStyle = {}, bell = false }) => {
  const { isDesktop } = useLayoutType();
  const notificationsContext = useNotifications();
  const unreadCount = notificationsContext?.unreadCount || 0;
  const hasUnread = unreadCount > 0;

  return (
    <View
      style={[
        Style.containerSpaceBetween,
        { marginBottom: 20, ...containerStyle },
      ]}
    >
      <View style={Style.containerRow}>
        <Text
          numberOfLines={1}
          style={{
            ...Fonts({
              type: "mainTitle",
              style: {
                marginRight: 10,
                maxWidth: isDesktop
                  ? sidebarWidth - 4 * gutters
                  : responsiveWidth(70),
              },
            }),
          }}
        >
          {title}
        </Text>
      </View>

      <View style={{ ...Style.containerRow }}>
        <Pressable onPress={() => navigate(Routes.Notifications)}>
          {bell && (
            <Image
              resizeMode="contain"
              source={icons.bell}
              style={{
                ...Style.iconDefault,
              }}
            />
          )}

          {hasUnread ? (
            <View
              style={{
                ...Style.itemBadge,
              }}
            />
          ) : null}
        </Pressable>
      </View>
    </View>
  );
};