"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import clsx from "clsx";

import { Badge, Button, Icon, IconName, Typography } from "@/components/ui";
import { useChats } from "@/providers/chats-provider";
import { ROUTES } from "@/shared/constants/client-routes";

import { useDrawer } from "..";
import Logo from "../Logo/Logo";

import styles from "./Header.module.scss";

interface HeaderProps {
  className?: string;
  isVisibleMenuButton?: boolean;
  isVisibleNotificationIcon?: boolean;
  isVisibleSearchIcon?: boolean;
  isVisibleBackButton?: boolean;
}

export default function Header({
  className,
  isVisibleMenuButton = true,
  isVisibleNotificationIcon = true,
  isVisibleSearchIcon = true,
  isVisibleBackButton = false,
}: HeaderProps) {
  const { open } = useDrawer();
  const { totalUnreadCount } = useChats();
  const router = useRouter();

  const handleBack = () => {
    router.back();
  };

  return (
    <header className={clsx(styles.header, className)}>
      <div>
        {isVisibleBackButton && (
          <Button className={styles.backButton} onClick={handleBack}>
            <Icon
              name={IconName.ChevronLeft}
              size={{ height: 22, width: 22 }}
              color="#374151"
            />
          </Button>
        )}
        {isVisibleMenuButton && (
          <Button className={styles.menuButton} onClick={open}>
            <Icon name={IconName.Menu} />
          </Button>
        )}
      </div>
      <Link href={ROUTES.home()}>
        <Logo />
      </Link>
      <div>
        <Link href={ROUTES.chat()}>
          {isVisibleNotificationIcon && (
            <Icon
              name={IconName.Notification}
              className={styles.notificationIcon}
            >
              <Badge className={styles.badge}>
                <Typography
                  weight="semiBold"
                  size="xs"
                  color="white"
                  className={styles.badgeContent}
                >
                  {totalUnreadCount > 99 ? "99+" : totalUnreadCount}
                </Typography>
              </Badge>
            </Icon>
          )}
        </Link>
        {isVisibleSearchIcon && <Icon name={IconName.Search} />}
      </div>
    </header>
  );
}