import { Button, Dropdown, Image, Menu } from "antd";
import { useRouter } from "next/router";
import { FC, useEffect, useState } from "react";
import MobileCatagory from "../mobileCategory/MobileCatagory";
import MobileSearchPopup from "../mobileSearch/MobileSearchPopup";
import styles from "./mobileFooter.module.scss";
import profile from "../../../../mockData/profileData";
import Router from "next/router";
import {
  HeartOutlined,
  ShoppingOutlined,
  MenuOutlined,
  UserOutlined,
  HomeOutlined,
  SearchOutlined
} from "@ant-design/icons";
import cx from "classnames";
import * as CommonAPI from "../../../../pages/api/common";
import _, { isEmpty } from "lodash";
import type { MenuProps } from "antd";
import OTPModal from "../../../modal/otpModal/OTPModal";
import NewModalSignIn from "../../../modal/newModalSignIn/NewModalSignIn";
import mobileFotter from "../../../../mockData/mobileFotter";
import { baseUrl } from "../../../../constants/urls";
const MobileFooter: FC<any> = (props) => {
  const [isCatagoryModalVisible, setIsCatagoryModalVisible] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [loginRes, setLoginRes] = useState<any>({});
  const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);
  const [profileInfo, setProfileInfo] = useState<any>(profile || []);
  const [isMobileOTPModalVisible, setIsMobileOTPModalVisible] = useState(false);
  const router = useRouter();
  const home = (): any => {
    router.push({
      pathname: "/home",
    });
  };

  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
    if(!isEmpty(details)){
      CommonAPI.getRequest(`${baseUrl}/api/check-user/email?source=${details?.data?.email}`).then((res)=>{
       
        if(res?.data?.status==false){
          localStorage.removeItem("loginDetails");
          localStorage.removeItem("PinCode");
          localStorage.removeItem("Citycode");
          localStorage.clear()
          if(props?.page=="home"){
            router.reload();
          }else{
          router.push({
            pathname: `/home`,
          });
        }
        }
      })
    }
     
    if (_.isEmpty(details)) {
      const newData: any = profileInfo.slice(0, profileInfo.length - 1);

      setProfileInfo(newData);
    }
  }, []);

  const profileData: MenuProps["onClick"] = (e: any) => {
    if (e.key === "15") {
      localStorage.removeItem("loginDetails");
      localStorage.removeItem("PinCode");
      localStorage.removeItem("Citycode");
      localStorage.clear()
      router.push("/home");
    }else if (e.key === "7") {
      if (_.isEmpty(loginRes)) {
      
        setIsOTPModalVisible(!isOTPModalVisible);
    }else{
    Router.push("/customerSupport/customerOrder");
      }
    }else if (e.key === "8") {
      if (_.isEmpty(loginRes)) {

        setIsOTPModalVisible(!isOTPModalVisible);
      } else {
        Router.push("/rfq");
      }
    }else if (e.key === "13") {
      if (_.isEmpty(loginRes)) {

        setIsOTPModalVisible(!isOTPModalVisible);
      } else {
        Router.push("/indispareRate");
      }
    } else {
      const found: any = mobileFotter.find((element: any) => element.key === e.key);

      if (_.isEmpty(loginRes)) {
        setIsOTPModalVisible(!isMobileOTPModalVisible);
      } else {
        router.push({
          pathname: `/customerDashboard/customerDashboard`,
          query: { val: found.label },
        });
      }
    }
  };
  const myPr = isEmpty(loginRes) ? "Sign In / Sign Up" : "My Profile";
  const menuExtraProps: any = !isEmpty(loginRes)
    ? {
        key: "15",
        label: "Logout",
        icon: (
          <Image
            src={"/images/profileIcon/Logout.svg"}
            height="20px"
            width="20px"
            alt="My Profile"
            preview={false}
          />
        ),
        className: styles.labelData,
      }
    : null;
  const userMenu = (
    <Menu
      onClick={profileData}
      items={[
        {
          key: "1",
          label: myPr,
          icon: (
            <Image
              src={"/images/profileIcon/Profile.svg"}
              height="20px"
              width="20px"
              alt="My Profile"
              preview={false}
            />
          ),
          className: styles.labelData,
        },
        {
          key: "2",
          label: "My Orders",
          icon: (
            <Image
              src={"/images/profileIcon/Orders.svg"}
              height="20px"
              width="20px"
              alt="My Profile"
              preview={false}
            />
          ),
          className: styles.labelData,
        },
        // {
        //   key: "3",
        //   label: "My Quotations",
        //   icon: (
        //     <Image
        //       src={"/images/profileIcon/Quotation.svg"}
        //       height="20px"
        //       width="20px"
        //       alt="My Profile"
        //       preview={false}
        //     />
        //   ),
        //   className: styles.labelData,
        // },
        {
          key: "4",
          label: "Address Book",
          icon: (
            <Image
              src={"/images/profileIcon/Address.svg"}
              height="20px"
              width="20px"
              alt="My Profile"
              preview={false}
            />
          ),
          className: styles.labelData,
        },
        {
          key: "5",
          label: "Sales Order",
          icon: (
            <Image
              src={"/images/profileIcon/Invoice.svg"}
              height="20px"
              width="20px"
              alt="My Profile"
              preview={false}
            />
          ),
          className: styles.labelData,
        },
        {
          key: "6",
          label: "My Wishlist",
          icon: (
            <Image
              src={"/images/profileIcon/MyWishlist.svg"}
              height="20px"
              width="20px"
              alt="My Profile"
              preview={false}
            />
          ),
          className: styles.labelData,
        },
        // {
        //   key: "7",
        //   label: "Customer Service",
        //   icon: (
        //     <Image
        //       src={"/images/profileIcon/CustomerService.svg"}
        //       height="20px"
        //       width="20px"
        //       alt="My Profile"
        //       preview={false}
        //     />
        //   ),
        //   className: styles.labelData,
        // },
        // {
        //   key: "8",
        //   label: "RFQ",
        //   icon: (
        //     <Image
        //       src={"/images/profileIcon/Invoice.svg"}
        //       height="20px"
        //       width="20px"
        //       alt="rfq"
        //       preview={false}
        //     />
        //   ),
        //   className: styles.labelData,

        // },
        {
          key: "9",
          label: "RFQ List",
          icon: (
            <Image
              src={"/images/profileIcon/Invoice.svg"}
              height="20px"
              width="20px"
              alt="rfq"
              preview={false}
            />
          ),
          className: styles.labelData,

        },
        {
          key: "10",
          label: "RFQ Quotations",
          icon: (
            <Image
              src={"/images/profileIcon/Invoice.svg"}
              height="20px"
              width="20px"
              alt="rfq"
              preview={false}
            />
          ),
          className: styles.labelData,

        },
          
   
        {
          key: "11",
          icon: (
            <Image
              src={"/images/profileIcon/Invoice.svg"}
              height="20px"
              width="20px"
              alt="rfq"
              preview={false}
            />
          ),
          className: styles.labelData,
          label: "Purchase Order"
        },
      
        // {
        //   key: "12",
          
        //   icon:(
        //     <Image
        //       src={"/images/profileIcon/Invoice.svg"}
        //       height="20px"
        //       width="20px"
        //       alt="rfq"
        //       preview={false}
        //     />
        //   ),
        //   className: styles.labelData, 
        //   label: "Gift Sheet Manager"
        // },
        // {
        //   key: "13",
        //   label: " Indispare Rate",
        //   icon: (
        //     <Image
        //       src={"/images/profileIcon/Invoice.svg"}
        //       height="20px"
        //       width="20px"
        //       alt="rfq"
        //       preview={false} 
        //     />
        //   ),
        //   className: styles.labelData,

        // },
        // {
        //   key: "14",
        //   label: "User Management",
        //   icon: (
        //     <Image
        //       src={"/images/profileIcon/Profile.svg"}
        //       height="20px"
        //       width="20px"
        //       alt="mgmt"
        //       preview={false} 
        //     />
        //   ),
        //   className: styles.labelData,

        // },
        { ...menuExtraProps },
      ]}
    />
  );

  return (
    <>
      <div className={styles.footerContainer}>
        <div className={styles.displayImagesContainer}>
          <Button type="link" className={styles.iconDisplay} onClick={home}>
            {/* <Image
              preview={false}
              width={20}
              height={20}
              alt="home"
              src={"/images/HomepageIcons/icon_signin.svg"}
            /> */}
            <HomeOutlined style={{fontSize:"20px",color:'#291C61'}}/>
            <span>Home</span>
          </Button>

          <Button
            type="link"
            onClick={() => {
              setIsModalVisible(true);
            }}
            className={styles.iconDisplay}
          >
            {/* <Image
              preview={false}
              width={20}
              height={20}
              alt="home"
              src={"/images/HomepageIcons/icon_signin.svg"}
            /> */}
            <SearchOutlined  style={{fontSize:"20px",color:'#291C61'}}/>
            <span>Search</span>
          </Button>

          <Button
            type="link"
            onClick={() => {
              setIsCatagoryModalVisible(true);
            }}
            className={styles.iconDisplay}
          >
            <Image
              preview={false}
              width={20}
              height={20}
              alt="home"
              src={"/images/Grid.svg"}
            />
            <span>Categories</span>
          </Button>
          <Dropdown
            overlay={userMenu}
            placement="topRight"
            className={styles.iconDisplayDrop}
            trigger={["click"]}
          >
            <a href="#" onClick={(e) => e.preventDefault()} onTouchStart={(e) => e.preventDefault()}>
              <Image
                preview={false}
                width={20}
                height={20}
                style={{ marginTop: "0px !important" }}
                alt="home"
                src={"/images/HomepageIcons/icon_signin.svg"}
              />

              <span>
                {!_.isEmpty(loginRes)
                  ? `Hi  ${loginRes?.data?.name}`
                  : " Account"}
              </span>
            </a>
          </Dropdown>
          {/* <Button type="link" className={styles.iconDisplay}>
                        <Image preview={false} width={20} height={20} alt="home" src={"/images/HomepageIcons/icon_signin.svg"}/>
                        <span>Account</span>
                    </Button> */}
        </div>
        <MobileCatagory
          handleClose={() => {
            setIsCatagoryModalVisible(false);
          }}
          isCatagoryModalVisible={isCatagoryModalVisible}
        />
        <MobileSearchPopup
        page={props?.page}
          isModalVisible={isModalVisible}
          handleClose={() => {
            setIsModalVisible(false);
          }}
        />
        <OTPModal
          handleOTPClose={() => {
            setIsOTPModalVisible(false);
          }}
          page={"home"}
          isOTPModalVisible={isOTPModalVisible}
          stateArray={props?.stateArray}
        />
        {isMobileOTPModalVisible?<NewModalSignIn
       handleMobileClose={() => {
        setIsMobileOTPModalVisible(false);
      }}
      isMobileOTPModalVisible={isMobileOTPModalVisible}
      />:null}
      </div>
    </>
  );
};
export default MobileFooter;