import classNames from "classnames";
import { useState, useTransition } from "react";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
import ContextMenu from "../drop-down-menu/ContextMenu";
import LogoScipaper from "../LogoScipaper";
import { Button } from "../Button/Button";
import Avatar from "../Avatar";
import Navbar from "../Navbar";
import Logo from "../Logo";
import { RouterLink } from "components/typography/RouterLink";

/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import {
  SVGBellNotification,
  SVGBell,
  SVGFavoriteOutlined,
  SVGFolder,
  SVGFile,
  SVGEye,
} from "components/icons";
import i18n from "localization/i18n";
import { useTranslation } from "react-i18next";

const Header = () => {
  const [authenticated, setAuthenticated] = useState(false);
  const onClick = () => setAuthenticated(true);
  const [notification, setNotification] = useState(false);
  const { t, i18n } = useTranslation();

  /* -------------------------------------------------------------------------- */
  /*                         Implement Header Component                         */
  /* -------------------------------------------------------------------------- */
  return (
    <header
      className="header flex justify-between items-center  box-border w-full 
                border border-gray-75  
                h-16 
                px-4
                gap-5
                md:gap-20
                lg:gap-40 lg:px-8
                xl:gap-60 xl:px-16"
    >
      {/* Logo and Menu */}
      <div className="flex gap-8 xl:gap-x-16 items-center">
        {/* Logo  - start - className="w-7 sm:w-10  " /> */}
        <a className="Logo flex items-center gap-1  sm:gap-2 " href="/">
          <Logo
            className={classNames(authenticated ? "w-10" : "w-7 sm:w-10" )}
          />
          <LogoScipaper
            className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")}
          />
        </a>
        {/* Logo  - end - */}

        {/* Menu( Create new - My library - About ) Start */}
        <div
          className="hidden lg:flex items-center
             gap-2"
        >
          {/* Link Create now - start -  */}
          <RouterLink
            className="text-blue-500 px-4 font-bold uppercase"
            to="/create-new"
          >
            {t('navbar.createNew')}
          </RouterLink>
          {/* Link Create now - end -  */}

          {/* Dropdown Menu My library - start - */}
          <ContextMenu
            emphasis="high"
            button={t('navbar.library.navTitle')}
            className="border-none uppercase"
          >
            <ContextMenuAction
              caption={t('navbar.library.publications')}
              action={() => console.log("My publications")}
              icon={<SVGFile className="stroke-black " />}
            ></ContextMenuAction>

            <ContextMenuAction
              caption={t('navbar.library.favorites')}
              action={() => console.log("My Favorites")}
              icon={<SVGFavoriteOutlined className="stroke-black" />}
            ></ContextMenuAction>

            <ContextMenuAction
              caption={t('navbar.library.collections')}
              action={() => console.log("My Collections")}
              icon={<SVGFolder className="stroke-black fill-black" />}
            ></ContextMenuAction>

            <ContextMenuAction
              caption={t('navbar.library.recentViewed')}
              action={() => console.log("Recent Viewed")}
              icon={<SVGEye className="stroke-black " />}
            ></ContextMenuAction>
          </ContextMenu>
          {/* Dropdown Menu My library - End -  */}

          {/* Dropdown Menu About - start - */}
          <ContextMenu
            emphasis="high"
            button={t('navbar.about.navTitle')}
            className="border-none uppercase"
          >
            <ContextMenuAction
              caption={t('navbar.about.aboutProject')}
              action={() => console.log("About Freeland")}
            ></ContextMenuAction>

            <ContextMenuAction
              caption={t('navbar.about.contacts')}
              action={() => console.log("Contact Us")}
            ></ContextMenuAction>

            <ContextMenuAction
              caption={t('navbar.about.help')}
              action={() => console.log("Help")}
            ></ContextMenuAction>
          </ContextMenu>
          {/* Dropdown Menu About - End - */}
        </div>
        {/* Menu( Create new - My library - About ) End */}
      </div>

      {/* Sign in - Sign up - Notification - Avatar - Burger  */}
      <div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
        {!authenticated
          ? [
            <Button
              emphasis="low"
              onClick={onClick}
              className="text-xs sm:px-4 sm:text-sm  "
            >
              {t('navbar.auth.signIn')}
            </Button>,
            <Button
              emphasis="medium"
              className="hidden md:flex"
              onClick={onClick}
            >
              {t('navbar.auth.signUp')}
            </Button>,
          ]
          : [
            <Button emphasis="low">
              <Button.Icon>
                {!notification ? (
                  <SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
                ) : (
                  <SVGBellNotification className="h-6 w-6 fill-gray-900 stroke-gray-900" />
                )}
              </Button.Icon>
            </Button>,

            <Button emphasis="low" className="hidden lg:flex">
              <Button.Icon>
                <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
              </Button.Icon>
            </Button>,
          ]}
        {/* Burger component will be shown for the small screens */}
        <Navbar className="block lg:hidden" />
      </div>
    </header>
  );
};

export default Header;
