import React, { ReactElement, useState } from "react";
import Logo from "../../public/images/logo/metashahr-logo-light.webp";
import Image from "next/image";
import { Box, Container, IconButton, Link as MuiLink } from "@mui/material";
import Grid from "@mui/material/Grid";
import Link from "next/link";
import { usePathname } from "next/navigation";
import clsx from "clsx";
import UsersIcon from "@/icons/UsersIcon";
import PhoneIcon from "@/icons/PhoneIcon";
import HomeIcon from "@/icons/HomeIcon";
import { partials } from "@/configs/partials";
import HeadphoneIcon from "@/icons/HeadPhoneIcon";
import StoreIcon from "@/icons/StoreIcon";
import { useAuth } from "@/configs/Providers/IsStoreProvider";
import LoginIcon from "@/icons/LoginIcon";
import NextLink from "next/link";
import { useGetSupportInfo } from "@/hooks/supportInfo/supportInfo-get";
import BurgerMenuIcon from "@/icons/BurgerMenuIcon";
import { useScreenSize } from "@/configs/Providers/useScreenSize";
import HeaderDrawer from "./HeaderDrawer";

type LinkType = {
  href: string;
  label: string;
  icon: ReactElement;
  hasPermission: boolean;
};

function InnerPagesHeader() {
  const [state, setState] = useState<boolean>(false);

  const { isStore, token } = useAuth();
  const pathname = usePathname();
  const { isMobile, isTablet } = useScreenSize();

  const { data } = useGetSupportInfo();

  const links: LinkType[] = [
    { href: "/", label: "خانه", icon: <HomeIcon />, hasPermission: true },
    {
      href: "/about",
      label: "درباره ما",
      icon: <UsersIcon />,
      hasPermission: true,
    },
    {
      href: "/contact",
      label: "ارتباط با ما",
      icon: <HeadphoneIcon />,
      hasPermission: true,
    },
    {
      href: "/store",
      label: "فروشگاه",
      icon: <StoreIcon width={20} height={20} />,
      hasPermission: isStore || false,
    },
  ];

  return (
    <>
      <Container maxWidth="lg">
        <Box
          sx={{
            width: "100%",
          }}
          className="container relative"
        >
          <Grid
            container
            spacing={2}
            className="w-[calc(100%-36px)] xl:w-[76%] h-[46px] bg-primary rounded-bl-2xl rounded-br-2xl absolute top-0 right-4 z-10 innerPagesHeader"
          >
            <Grid
              size={{ xs: 12, lg: 5 }}
              className="flex gap-1 items-center justify-between pe-2"
            >
              <Image
                src={Logo}
                alt={"logo image"}
                width={130}
                height={44}
                className="aspect-[4/1]"
              />
              {(isMobile || isTablet) && (
                <IconButton onClick={() => setState(true)}>
                  <BurgerMenuIcon fill={partials.white} />
                </IconButton>
              )}
              <MuiLink
                component={NextLink}
                href={`tel:+98${data?.SupportTell}`}
                underline="none"
                color="inherit"
                className="hidden lg:flex"
              >
                <div className="flex gap-2 items-center">
                  <PhoneIcon fill={partials.white} width={24} height={24} />
                  <div className="flex flex-col">
                    <p className="text-[10px] font-semibold pb-[2px] text-gray-400">
                      تلفن پشتیبانی
                    </p>
                    <p className="text-[13px] text-white font-semibold">
                      {data?.SupportTell}
                    </p>
                  </div>
                </div>
              </MuiLink>
            </Grid>
            <Grid
              size={{ xs: 0, lg: 7 }}
              className="hidden lg:flex gap-1 items-center none relative after:content-[''] after:absolute after:top-[20%] after:right-0 after:h-[60%] after:w-[2px] after:bg-gray-400 ps-2 justify-between"
            >
              <div className="flex gap-1">
                {links
                  .filter((item) => item.hasPermission)
                  .map((link) => (
                    <Link
                      key={link.href}
                      href={link.href}
                      className={clsx(
                        "px-3 py-2 text-sm font-medium transition-colors flex gap-2",
                        pathname === link.href
                          ? "text-white"
                          : "text-gray-400 hover:text-white"
                      )}
                    >
                      {React.cloneElement(link.icon, {
                        fill:
                          pathname === link.href
                            ? partials.white
                            : partials.lightGray,
                      })}
                      {link.label}
                    </Link>
                  ))}
              </div>
              {!token && (
                <Link
                  href={"/login"}
                  className={
                    "px-3 py-2 text-sm font-medium transition-colors flex gap-2 text-white"
                  }
                >
                  <LoginIcon />
                  ورود
                </Link>
              )}
            </Grid>
          </Grid>
        </Box>
      </Container>
      <HeaderDrawer state={state} supportTell={data?.SupportTell} setState={() => setState(false)} />
    </>
  );
}

export default InnerPagesHeader;