import { Drawer, Image } from "antd";
import cx from "classnames";
import React, { useEffect, useState } from "react";
import styles from "./mobileSideMenu.module.scss";
import {
  FacebookOutlined,
  TwitterOutlined,
  InstagramOutlined,
  YoutubeOutlined
} from "@ant-design/icons";
import Router, { useRouter } from "next/router";
import profile from "../../../../mockData/profileData";
import _, { isEmpty } from "lodash";
import OTPModal from "../../../modal/otpModal/OTPModal";
import content from "../../../../mockData/sidebarData";
import menuContent from "../../../../mockData/mobileSideMenu";

const MobileSideMenu = (props: any) => {
  const router = useRouter();
  const { isDrawerVisible, onClose, width } = props;
  const [loginRes, setLoginRes] = useState<any>({});
  const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);
  const [isMobileOTPModalVisible, setIsMobileOTPModalVisible] = useState(false);
  const becomeSeller = (): any => {
    router.push({
      pathname: `/seller/sellerLogin/signup`
    });
  }

  const loginSeller = () => {
    router.push({
      pathname: `/seller/sellerLogin/login`,
    });
  }

  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);

  }, []);

  const userDashboard = (data: any) => {

    if (data.key === "12") {
      localStorage.removeItem("loginDetails");
      localStorage.removeItem("PinCode");
      localStorage.removeItem("Citycode");
      localStorage.clear()
      router.push("/home");
    } else if (data.key === "7") {
      if (_.isEmpty(loginRes)) {

        setIsOTPModalVisible(!isOTPModalVisible);
      } else {
        Router.push("/customerSupport/customerOrder");
      }
    } else if (data.key === "8") {
      if (_.isEmpty(loginRes)) {

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

        setIsOTPModalVisible(!isOTPModalVisible);
      } else {
        Router.push("/indispareRate");
      }
    } else {


      if (_.isEmpty(loginRes)) {
        setIsOTPModalVisible(!isMobileOTPModalVisible);
      } else {
        router.push({
          pathname: `/customerDashboard/customerDashboard`,
          query: { val: data.name },
        });
      }
    }
  }


  const dasbboard = () => {
    if (_.isEmpty(loginRes)) {

      setIsOTPModalVisible(!isOTPModalVisible);
    } else {
      router.push({
        pathname: `/customerDashboard/customerDashboard`,
        query: { val: 'Dashboard' },
      });
    }
  }
  return (
    <>
      <div>
        <Drawer
          title="Menu"
          placement={"right"}
          width={width}
          onClose={onClose}
          visible={isDrawerVisible}
          className={cx("drawerContainer, ant-drawer-title")}
          headerStyle={{ fontSize: "28px", fontWeight: "700" }}
        >
          <div className={styles.drawerBodyContainer}>
            <div>
              {/* <div className={styles.drawerText}>Surplus Selling</div> */}
              {/* <div className={styles.drawerText}>Get a Quotation</div> */}
              <div className={styles.drawerText} onClick={() => { _.isEmpty(loginRes) ? setIsOTPModalVisible(!isOTPModalVisible) : null }}>{!_.isEmpty(loginRes)
                ? `Hi ${loginRes?.data?.name}`
                : " Customer Sign In or Sign Up"}</div>
              <div className={styles.drawerText} style={{marginTop:"2em"}} onClick={loginSeller}>Seller Login </div>
              <div className={styles.drawerText} style={{marginBottom:"2em"}}onClick={becomeSeller}>Sell on Indispare</div>
              
              {(!_.isEmpty(loginRes)) ? <>{menuContent?.map((data: any, i: number) => {
                return <div className={styles.drawerText} onClick={() => userDashboard(data)} key={i}>{data?.name}</div>
              })}</> : <>{profile?.filter(item => item.key !== "12").map((data: any, i: number) => {
                return <div className={styles.drawerText} onClick={() => userDashboard(data)} key={i}>{data?.label}</div>
              })}</>}

              {/* <div className={styles.drawerText}>Shipping</div> 
<!--               <div className={styles.drawerText} onClick={() => {
                Router.push("/faq");
              }}>FAQ</div> -->*/}
              {/* <div className={styles.drawerText}>Compare Products</div> */}
            </div>
            <div className={styles.secondChild}>
              {/* <div className={styles.drawerText}>Enquire us</div> */}
              <div className={styles.drawerText} onClick={() => {
                Router.push("/contactUs");
              }}>Contact us</div>
              <div className={cx("ant-row my-5")}>
                <div className={styles.home__footer__icon_container} onClick={() => { window.open("https://www.youtube.com/@indispare") }}>
                  <YoutubeOutlined className={styles.home__footer__icon} />
                </div>
                <div className={styles.home__footer__icon_container} onClick={() => { window.open("https://www.facebook.com/indisparecom") }}>
                  <Image src="/images/Facebook.svg" className={styles.home__footer__icon} preview={false} />
                  {/* <FacebookOutlined className={styles.home__footer__icon} /> */}
                </div>
                <div className={styles.home__footer__icon_container} onClick={() => { window.open("https://twitter.com/indispare?t=1Cb6KpGWcNVzTKCM_G5R1g&s=08") }}>
                  <Image src="/images/Twitter.svg" className={styles.home__footer__icon} preview={false} />
                  {/* <TwitterOutlined className={styles.home__footer__icon} /> */}
                </div>
                <div className={styles.home__footer__icon_container} onClick={() => { window.open("https://www.instagram.com/indispare/") }}>
                  <InstagramOutlined className={styles.home__footer__icon} />
                </div>
              </div>
            </div>
          </div>
        </Drawer>
        <OTPModal
          handleOTPClose={() => {
            setIsOTPModalVisible(false);
          }}
          page={"home"}
          isOTPModalVisible={isOTPModalVisible}
          stateArray={props?.stateArray}
        />
      </div>
    </>
  );
};

export default MobileSideMenu;