/* -------------------------------------------------------------------------- */
/*                                    Libs                                    */
/* -------------------------------------------------------------------------- */
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import ContextMenu from "components/containers/contextmenu/ContextMenu";
import Logotype from "components/Logotype";
import Button from "components/controls/Button";
import Avatar from "components/containers/Avatar";
import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
/* -------------------------------------------------------------------------- */
/*                                     SVG                                    */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGSearchIcon } from "assets/svg/search.svg";
import { ReactComponent as SVGBellIcon } from "assets/svg/bell.svg";
import { ReactComponent as SVGCogIcon } from "assets/svg/cog.svg";
import { ReactComponent as SVGUserAddIcon } from "assets/svg/user-add.svg";
import { ReactComponent as SVGExitIcon } from "assets/svg/exit.svg";
/* -------------------------------------------------------------------------- */
/*                                    Hooks                                   */
/* -------------------------------------------------------------------------- */
import { useUserStore } from "user/data/userSlice";
import { useUserViewModel } from "user/controller/userViewModel";
import { useUIStore } from "ui/data/uiSlice";
import { useUIViewModel } from "ui/controller/uiViewModel";
import { useTranslation } from "react-i18next";
import ServicesNavigationContext from "services/views/ServicesNavigationContext";
import { useAuthStore } from "auth/data/authSlice";
import { useAuthViewModel } from "auth/controller/useAuthViewModel";

/* -------------------------------------------------------------------------- */
/*                           Main application header                          */
/* -------------------------------------------------------------------------- */
type Props = {
  title?: string;
}
/**
 * Main application header
 * @return {JSX.Element}
 */
export default function Header({title}: Props) {

  const {t} = useTranslation();
  const userStore = useUserStore();
  const uiStore = useUIStore();
  const authStore = useAuthStore();
  const {signOut} = useAuthViewModel(authStore);
  const { user, isLoading, getUser } = useUserViewModel(userStore);
  const { showSearchbar } = useUIViewModel(uiStore);

  useEffect(() => {
    getUser();
  }, [getUser]);

  const navigate = useNavigate();
  return (
    <div
      className="flex items-center flex-row
    justify-between py-2.5 px-8 bg-gray-300/5 h-14"
    >
      <div className="flex-none flex items-center space-x-3">
        <ServicesNavigationContext />
        <Logotype name={title} />
      </div>
      <div className="flex-none flex items-center space-x-3">
        <Button iconed="only" className="w-10 h-10" variant="blue" type="text" onClick={showSearchbar}>
          <SVGSearchIcon className="w-full h-full stroke-current" />
        </Button>
        <Button iconed="only" className="w-10 h-10" variant="blue" type="text">
          <SVGBellIcon className="w-full h-full stroke-current" />
        </Button>
        <ContextMenu
          button={<Avatar className="p-2" />}
          className="absolute w-full min-h-14 sm:w-80  -bottom-3
          sm:top-auto sm:bottom-auto right-0
          mt-5 z-10 sm:transform -translate-1/2 
          origin-top-center flex flex-col items-center justify-center !pt-8"
        >
          <Logotype name="techpal" />
          <div className="w-full my-4 flex justify-center">
            <Avatar width="27%" className="p-3.5" />
          </div>
          <div className="text-xl text-center font-bold leading-relaxed">
            {isLoading
              ? " "
              : t("hellousr", {
                  username: [user?.lastname, user?.firstname].join(" "),
                })}
          </div>
          <div className="text-sm text-center text-gray-300 leading-relaxed mb-5">
            {isLoading ? " " : user?.email}
          </div>
          <ContextMenuAction
            action={() => {
              navigate('/personal-information');
            }}
            disabled={isLoading}
            className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
            caption="Account settings"
            icon={
              <SVGCogIcon className="w-6 h-6 stroke-gray-200/30 group-hover:stroke-current" />
            }
          />
          <ContextMenuAction
            action={() => {
              navigate("");
            }}
            disabled={isLoading}
            className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
            caption={t("account.connect")}
            icon={
              <SVGUserAddIcon className="w-6 h-6 stroke-gray-200/30 group-hover:stroke-current" />
            }
          />
          <ContextMenuAction
            action={signOut}
            className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md transition-colors"
            caption={t('logOut')}
            icon={
              <SVGExitIcon className="w-6 h-6 stroke-gray-200/30 group-hover:stroke-current" />
            }
          />
        </ContextMenu>
      </div>
    </div>
  );
}
