import Logo from "../../home/logo/Logo";
import styles from "./sellerHeader.module.scss";
import {
  MenuOutlined,
  HeartOutlined,
  ShoppingOutlined,
  UserOutlined,
} from "@ant-design/icons";

import { CgProfile } from "react-icons/cg";
import { FC, useState } from "react";
import SingInModal from "../../modal/singInModel/SingInModal";
import MobileSideMenu from "../../home/mobile/mobileSideMenu/MobileSideMenu";
import OTPModal from "../../modal/otpModal/OTPModal";
import { useRouter } from "next/router";


const NavSignList = [
  { displayName: "Seller Login", groupStart: true, Icon: CgProfile,id:"login" },
  { displayName: "Become a Seller", groupStart: true, Icon: CgProfile,id:"signup" },
  // {
  //   displayName: "fav",
  //   groupStart: true,
  //   Icon: HeartOutlined,
  //   hideDisplayName: true,
  // },
  // {
  //   displayName: "cart",
  //   groupStart: false,
  //   Icon: ShoppingOutlined,
  //   hideDisplayName: true,
  // },
  // {
  //   displayName: "extra",
  //   groupStart: false,
  //   Icon: MenuOutlined,
  //   hideDisplayName: true,
  // },
];

const SellerHeader:FC<any> = ({id}) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
  const [isVisible, setVisibility] = useState(false);
  const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);
  const router = useRouter();

  const navigationRoute = ()=>{
    if(id=="login"){
      window?.sessionStorage.removeItem("SellerBasicDetails");
      window?.sessionStorage.removeItem("VendorOnInput");
      window?.sessionStorage.removeItem("ReverifyType")
      router.push({
        pathname: `/seller/sellerLogin/signup`,
      });
    }else{
      window?.sessionStorage.removeItem("SellerBasicDetails");
      window?.sessionStorage.removeItem("VendorOnInput");
      window?.sessionStorage.removeItem("ReverifyType")
      router.push({
        pathname: `/seller/sellerLogin/login`,
      });
    }

  }

  return (
    <>
      <div>
        <div className={styles.headerContainer}>
          <div>
            <Logo />
          </div>
          <div className="flex flex-row gap-2 mb-0">
            <div className={styles.rightNavItem} onClick={navigationRoute}>
            <span >
          <CgProfile style={{fontSize:"20px", color: "#291C61" }} /> 
        </span>
      <span className={styles.navListText}>
      {id && id =="login"?"Become a Seller":"Seller Login"}
      </span>
            </div>
            {/* {NavSignList.map((Item) => (
              <NavMenuItem
                key={Item.displayName}
                Item={Item}
                isOTPModalVisible={isOTPModalVisible}
                setIsOTPModalVisible={setIsOTPModalVisible}
                isDrawerVisible={isDrawerVisible}
                setDrawerVisible={setIsDrawerVisible}
                router={router}
                id={id}
                navigationRoute={navigationRoute}
              />
            ))} */}
          </div>
        </div>
        <SingInModal
          handleClose={() => {
            setIsModalVisible(false);
          }}
          isModalVisible={isModalVisible}
        />
        <MobileSideMenu
          onClose={() => {
            setIsDrawerVisible(false);
          }}
          isDrawerVisible={isDrawerVisible}
        />
        <OTPModal
          handleOTPClose={() => {
            setIsOTPModalVisible(false);
          }}
          isOTPModalVisible={isOTPModalVisible}
        />
      </div>
    </>
  );
};

const NavMenuItem = ({
  Item,
  drawerVisible,
  setDrawerVisible,
  isOTPModalVisible,
  setIsOTPModalVisible,
  routeSeller,
  router,
  navigationRoute,
  id
}: any) => {
  return (
    <li
      onClick={() => {
        Item.displayName === "extra"
          ? setDrawerVisible(!drawerVisible)
          : Item.displayName === "Seller Login" || Item.displayName === "Become a Partner"
          ? navigationRoute()
          : Item.displayName === "Seller with us"
          ? routeSeller()
          : null;
      }}
      key={Item.displayName}
      className={styles.rightNavItem}
    >
      <span >
          {Item.Icon && id!=Item.id ? <Item.Icon style={{fontSize:"20px", color: "#291C61" }} /> : ""}
        </span>
      <span className={styles.navListText}>
        {id && id!=Item.id?Item.displayName:""}
      </span>
    </li>
  );
};

export default SellerHeader;