import cx from "classnames";
import styles from "./mobileHeader.module.scss";
import { Badge, Image, notification } from "antd";
import React, { useContext, useEffect, useState } from "react";
import MobileSideMenu from "../mobileSideMenu/MobileSideMenu";
import { useRouter } from "next/router";
import * as CartApi from "../../../../pages/api/cart";
import _ from "lodash";
import shopConetxt from "../../../../context/shopConetxt";
import Geocode from "react-geocode";
import PincodeModal from "../../../modal/pincode/PincodeModal";
import * as CommonApi from "../../../../pages/api/common";
import { APIKEY, baseUrl } from "../../../../constants/urls";
import OTPModal from "../../../modal/otpModal/OTPModal";
import NewModalSignIn from "../../../modal/newModalSignIn/NewModalSignIn";
import Router from "next/router";
import {
  HeartOutlined,
  ShoppingOutlined,
  MenuOutlined,
  UserOutlined,
  DownOutlined,
  ArrowRightOutlined,
} from "@ant-design/icons";
const MobileHeader: React.FC<any> = (props) => {
  const { cart, setCartItems } = useContext(shopConetxt);
  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
  const [cartItemCount, setCartItemCount] = useState(0);
  const [isOpen, setOpen] = useState(false);
  const [pincode, setPincode] = useState("");
  const [city, setCity] = useState("Hyderabad");
  const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);
  const [loginRes, setLoginRes] = useState<any>({});
  const [applyPincode, SetApplyPincode] = useState("");
  const [pincodeData, setPincodeData] = useState<any>([]);
  const [isAddressVisible, setIsAddressVisible] = useState(false);
  const [newSelect, setNewSelect] = useState("");
  const [isMobileOTPModalVisible, setIsMobileOTPModalVisible] = useState(false);

  const [isRFQModalVisible, setIsRFQModalVisible] = useState(false);
  const router = useRouter();
  const rfq = (): any => { 
    if (_.isEmpty(loginRes)) {

      setIsOTPModalVisible(!isOTPModalVisible);
    } else {
      Router.push("/rfq");
    }
  };
  const handleOTPClose = () => {
    setIsOTPModalVisible(false);
    setIsRFQModalVisible(false); 
  }; 

  // const [cart, setCart] = useState(0);
  const home = (): any => {
    router.push({
      pathname: `/home`,
    });
  };

  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
    const tokenData: any = !_.isEmpty(details) ? details.token : null;
    CartApi.cartFetch(tokenData).then((res) => {

      if (cart.length === 0) {
        setCartItems(res?.data);
        setCartItemCount(res?.data?.items.length);
      }
      // if (res.data !== null) {
      //   setCart(res.data.items.length);
      // }
    });
  }, []);

  useEffect(() => {
    setCartItemCount(cart.length);
  }, [cart]);

  const cartPage = (): any => {
    router.push({
      pathname: `/cart`,
    });
  };



  const applyNewPincode = () => {
    setOpen(false);
  };

  const handlePincodeChange = () => {
    if (pincode.length === 6) {
      SetApplyPincode(pincode);
      localStorage.setItem("city", "Hyderabad");
      localStorage.setItem("PinCode", pincode);
      applyNewPincode();
      if (!_.isEmpty(loginRes)) {
        const data = {
          id: 0,
          postcode: pincode
        }
        addressSelect(data);
      }
    } else {
      notification.error({ message: "Please Enter Valid Pin" });
    }
  };

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


    const cityPincode = localStorage.getItem("PinCode");
    const cityName = localStorage.getItem("Citycode");

    if (!cityPincode && _.isEmpty(details)) {
      setOpen(false);
    }

    if (cityPincode) {
      setPincode(cityPincode);
      SetApplyPincode(cityPincode);
    }

    if (cityName) {
      setCity(cityName);
    }
    console.log(cityPincode);
    if ((!cityPincode || cityPincode == null) && _.isEmpty(details)) {
      navigator.geolocation.getCurrentPosition(function (position) {
        Geocode.setApiKey(APIKEY);
        Geocode.enableDebug();

        Geocode.fromLatLng(
          `${position.coords.latitude}`,
          `${position.coords.longitude}`
        ).then((response: any) => {
          const res = response.results[0].address_components.length > 4 ? 0 : 1;

          for (
            let i = 0;
            i < response.results[res].address_components.length;
            i++
          ) {
            const types = response.results[res].address_components[i].types;

            for (let typeIdx = 0; typeIdx < types.length; typeIdx++) {
              if (types[typeIdx] === "postal_code") {
                const pin = response.results[res].address_components.pop();
                setPincode(pin.short_name);
                SetApplyPincode(pin.short_name);
                const setPin = pin.short_name;
                localStorage.setItem("PinCode", setPin);
              } else if (types[typeIdx] === "political") {
                setCity(response.results[res].address_components[3].short_name);
                localStorage.setItem(
                  "Citycode",
                  response.results[res].address_components[3].short_name
                );
              }
            }
          }
        });
      });
    }
  }, []);
  const showModal = () => {
    // if (_.isEmpty(loginRes)) {
    //   setOpen(true);
    // }
    setNewSelect("");
    setPincode("");
    setOpen(true);
  };

  const handleOk = () => {
    setOpen(false);
  };

  const handleCancel = () => {

    setOpen(false);
  };


  const handleCategorySelect = () => {
    router.push({
      pathname: `/home`,
    });
  };

  const addressSelect = (data: any) => {
    setNewSelect(data.postcode);
    const params = {
      address_id: data.id,
      pincode: data.postcode,
      customer_id: loginRes?.data?.id,
      ip_address: "",
    };
    CommonApi.postRequestWithToken(
      `${baseUrl}/api/customer-pincodes/create?token=true`,
      params,
      loginRes?.token
    ).then((res) => {
      localStorage.setItem("PinCode", res?.data?.data?.pincode);
      SetApplyPincode(res?.data?.data?.pincode);
      setCity(res?.data?.data?.city);
      localStorage.setItem("Citycode", res?.data?.data?.city);
      setIsAddressVisible(false);
      applyNewPincode();
      setPincode("");
      if (router.route === "/products/details/[id]") {
        router.reload();
      }
    });
  };
  return (
    <>

      <div className={props.home ? styles.MobileHeaderContainerHome : styles.MobileHeaderContainer}>
      <div className={cx(styles.contactUsEmailTotal)}>For any query, email us at <span className={styles.contactUsEmail}><a href="mailto:contact@indispare.com">contact@indispare.com</a></span> <br/>or call us on  <span className={styles.contactUsEmail}>+91 8977028189</span></div>
        <div className={styles.displayContainer}>
        
          <div className={cx("ant-col ant-col-sm-14 cursor-pointer")} onClick={home}>

            <Image
              width={170}
              height={50}
              src={"/images/logo-new-home.svg"}
              alt="siteLogo"
              preview={false}
            />
          </div>
          {/* <div className={cx("ant-col ant-col-sm-4")}>
          
            </div> */}

          <div className={cx("ant-col ant-col-sm-10", styles.mobileHeaderIcons)}>
            <div className={`${styles.mobileCard} ${styles.rfqbtn} `} onClick={rfq}> 
             RFQ <span className={styles.rfqArrow}> &nbsp;➜</span>
            </div>
            <div className={styles.mobileCard} onClick={showModal}>
              <Image
                width={24}
                height={24}
                src={"/images/HomepageIcons/icon_location.svg"}
                alt="icon_cart"
                preview={false}
              />
            </div>
            <Badge count={cartItemCount ? cartItemCount : 0} className={styles.badgeStyle} >
              <ShoppingOutlined className={styles.itemIcons} onClick={cartPage} />
            </Badge>
            {/* <div className={styles.mobileCard} onClick={cartPage}>
              <Image
                width={24}
                height={24}
                src={"/images/HomepageIcons/icon_cart.svg"}
                alt="icon_cart"
                preview={false}
              />
                <span className={cx(cartItemCount === 0 ||cartItemCount ===undefined ?styles.cartText1:styles.cartText)}>{cartItemCount}</span>
              
            </div> */}
            <div
              onClick={() => {
                setIsDrawerVisible(true);
              }}
              className={styles.mobileCard}
            >
              <Image
                preview={false}
                width={24}
                height={24}
                src={"/images/HomepageIcons/icon_menu.svg"}
                alt="icon_menu"
              />
            </div>
          </div>
        </div>
        <MobileSideMenu
          isDrawerVisible={isDrawerVisible}
          onClose={() => {
            setIsDrawerVisible(false);
          }}
          width={300}
        />
        {isOpen ? <PincodeModal
          isOpen={isOpen}
          handleOk={handleOk}
          handleCancel={handleCancel}
          handlePincodeChange={handlePincodeChange}
          addressSelect={addressSelect}
          SetApplyPincode={SetApplyPincode}
          pincode={pincode}
          setPincode={setPincode}
          applyPincode={applyPincode}
          newSelect={newSelect}
          setNewSelect={setNewSelect}
          isOTPModalVisible={isOTPModalVisible}
          setIsOTPModalVisible={setIsOTPModalVisible}
          setIsMobileOTPModalVisible={setIsMobileOTPModalVisible}
        /> : null}
        {/* <OTPModal
          handleOTPClose={() => {
            setIsOTPModalVisible(false);
          }}
          isOTPModalVisible={isOTPModalVisible}
          stateArray={props?.stateArray}
        /> */}
         <OTPModal
          handleOTPClose={() => {
            setIsOTPModalVisible(false);
          }}
          page={"home"}
          isOTPModalVisible={isOTPModalVisible}
          stateArray={props?.stateArray}
        />
        <NewModalSignIn
          handleMobileClose={() => {
            setIsMobileOTPModalVisible(false);
          }}
          isMobileOTPModalVisible={isMobileOTPModalVisible}
        />
      </div>
    </>
  );
};
export default MobileHeader;