import { FC, useEffect, useState } from "react";
import { EnvironmentOutlined } from "@ant-design/icons";
import { Menu, notification } from "antd";

import styles from "./pinCode.module.scss";
import OTPModal from "../../modal/otpModal/OTPModal";
import _ from "lodash";
import Router, { useRouter } from "next/router";
import axios from "axios";
import Geocode from "react-geocode";
import ListAddress from "../../modal/listAddress/ListAddress";
import * as CommonApi from "../../../pages/api/common";
import { APIKEY, baseUrl } from "../../../constants/urls";

import PincodeModal from "../../modal/pincode/PincodeModal";
import NewModalSignIn from "../../modal/newModalSignIn/NewModalSignIn";



const getPincodeAndCity = () => {
  const pincode = localStorage.getItem("PinCode");
  const city = localStorage.getItem("city");
  if (city && pincode) {
    return [pincode, city];
  } else {
    return [];
  }
};

const setPincodeAndCity = ({ pincode }: any) => {
  window?.localStorage.removeItem("city");
  window?.localStorage.setItem("pincode", pincode);
  window?.localStorage.setItem("city", "Hyderabad");
};

const Pincode: FC<any> = (props) => {

  const router = useRouter();
  const [isOpen, setOpen] = useState(false);
  const [pincode, setPincode] = useState("");
  const [city, setCity] = useState("Hyderabad");
  const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);
  const [isMobileOTPModalVisible, setIsMobileOTPModalVisible] = 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 showModal = () => {
    // if (_.isEmpty(loginRes)) {
    //   setOpen(true);
    // }
    setNewSelect("");
    setPincode("");
    setOpen(true);
  };

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

  const handleCancel = () => {

    setOpen(false);
  };

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

  const handlePincodeChange = () => {
    if (pincode.length === 6) {

      SetApplyPincode(pincode);
      Geocode.setApiKey(APIKEY);
      Geocode.enableDebug();
      Geocode.fromAddress(pincode).then((response: any) => {
        console.log(response,"response")


        const res = response.results[0].address_components.length > 4 ? 0 : 1;
        const { long_name: postalCode = "" } =
          response.results[0].address_components.find((c: any) => c.types.includes("postal_code")) ||
          {};
        const { long_name: locality = "" } =
          response.results[0].address_components.find((c: any) => c.types.includes("sublocality")) || {}

        if (locality == "") {
          const { long_name: locality1 = "" } = response.results[0].address_components.find((c: any) => c.types.includes("locality")) || {}
          setCity(locality1);
          localStorage.setItem(
            "Citycode",
            locality1
          );
        } else {
          setCity(locality);
          localStorage.setItem(
            "Citycode",
            locality
          );
        }

        console.log(postalCode,"postalCode")
        setPincode(postalCode);
        SetApplyPincode(postalCode);
        const setPin = postalCode;
        localStorage.setItem("PinCode", setPin);

        // setCity(locality);
        // localStorage.setItem(
        //   "Citycode",
        //   locality
        // );

        // 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[i];
        //       // console.log(pin,"pin")
        //       setPincode(pin.short_name);
        //       SetApplyPincode(pin.short_name);
        //       const setPin = pin.short_name;
        //       localStorage.setItem("PinCode", setPin);
        //     } else if (types[typeIdx] == "locality") {
        //       const city = response.results[res].address_components[i];
        //       // console.log(city,"city")
        //       setCity(city.long_name);
        //       localStorage.setItem(
        //         "Citycode",
        //         city.long_name
        //       );
        //     }
        //   }
        // }
        localStorage.setItem("PinCode", pincode);
        applyNewPincode();
        if (!_.isEmpty(loginRes)) {
          const data = {
            id: 0,
            postcode: pincode
          }
          addressSelect(data);
        }
      }).catch((er)=>{
      
      // setPincode("");
      // SetApplyPincode("");
      // const setPin = postalCode;
      // applyNewPincode();
      // localStorage.setItem("PinCode", "");
      notification.error({message:"Please Enter Valid Pincode"})
    });
     
    } else {
      notification.error({ message: "Please Enter Valid Pin" });
    }
  };

  

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

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





    if (!cityPincode && _.isEmpty(details) || 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;

          const { long_name: postalCode = "" } =
            response.results[0].address_components.find((c: any) => c.types.includes("postal_code")) ||
            {};

          const { long_name: locality = "" } =
            response.results[0].address_components.find((c: any) => c.types.includes("sublocality")) || {}

          if (locality == "") {
            const { long_name: locality1 = "" } = response.results[0].address_components.find((c: any) => c.types.includes("locality")) || {}
            setCity(locality1);
            localStorage.setItem(
              "Citycode",
              locality1
            );
          } else {
            setCity(locality);
            localStorage.setItem(
              "Citycode",
              locality
            );
          }
          setPincode(postalCode);
          SetApplyPincode(postalCode);
          const setPin = postalCode;
          localStorage.setItem("PinCode", setPin);

          
        });
      });
    } else if (!_.isEmpty(details)) {
      
      localStorage.removeItem("PinCode");
      localStorage.removeItem("Citycode");
      Geocode.setApiKey(APIKEY);
      Geocode.enableDebug();
      setTimeout(() => {
        CommonApi.getRequestWithToken(
          `${baseUrl}/api/customer-pincodes/get-data?token=true&customer_id=${details?.data?.id}`,
          details?.token
        ).then((Selectres) => {

          const addrs =
            Selectres?.data?.data === null ? {} : Selectres?.data?.data;
          localStorage.setItem("PinCode", Selectres?.data?.data?.pincode);
          setPincode(Selectres?.data?.data?.pincode);
                  SetApplyPincode(Selectres?.data?.data?.pincode);
          if (Selectres?.data?.data?.city != null) {
            localStorage.setItem("Citycode", Selectres?.data?.data?.city);
            setCity(Selectres?.data?.data?.city);
          } else {

            if (Selectres?.data?.data != null) {

              Geocode.fromAddress(Selectres?.data?.data?.pincode).then((response: any) => {
                const { long_name: locality = "" } =
                  response.results[0].address_components.find((c: any) => c.types.includes("sublocality")) || {}

                if (locality == "") {
                  const { long_name: locality1 = "" } = response.results[0].address_components.find((c: any) => c.types.includes("locality")) || {}
                  setCity(locality1);
                  localStorage.setItem(
                    "Citycode",
                    locality1
                  );
                } else {
                  setCity(locality);
                  localStorage.setItem(
                    "Citycode",
                    locality
                  );
                }
              })
              return;
            // } else {

            //   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;

            //       const { long_name: postalCode = "" } =
            //         response.results[0].address_components.find((c: any) => c.types.includes("postal_code")) ||
            //         {};

            //       const { long_name: locality = "" } =
            //         response.results[0].address_components.find((c: any) => c.types.includes("sublocality")) || {}

            //       if (locality == "") {
            //         const { long_name: locality1 = "" } = response.results[0].address_components.find((c: any) => c.types.includes("locality")) || {}
            //         setCity(locality1);
            //         localStorage.setItem(
            //           "Citycode",
            //           locality1
            //         );
            //       } else {
            //         setCity(locality);
            //         localStorage.setItem(
            //           "Citycode",
            //           locality
            //         );
            //       }
            //       setPincode(postalCode);
            //       SetApplyPincode(postalCode);
            //       const setPin = postalCode;
            //       localStorage.setItem("PinCode", setPin);
            //     });
            //   });
            // }
          }
        }
        });
      }, 200);



    } else {
      
      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;
          const { long_name: postalCode = "" } =
            response.results[0].address_components.find((c: any) => c.types.includes("postal_code")) ||
            {};

          setPincode(postalCode);
          SetApplyPincode(postalCode);
          const setPin = postalCode;
          localStorage.setItem("PinCode", setPin);
          const { long_name: locality = "" } =
            response.results[0].address_components.find((c: any) => c.types.includes("sublocality")) || {}

          if (locality == "") {
            const { long_name: locality1 = "" } = response.results[0].address_components.find((c: any) => c.types.includes("locality")) || {}
            setCity(locality1);
            localStorage.setItem(
              "Citycode",
              locality1
            );
          } else {
            setCity(locality);
            localStorage.setItem(
              "Citycode",
              locality
            );
          }
          
        });
      });
    }
    
  }, []);

  useEffect(() => {
    const cityPincode: any = localStorage.getItem("PinCode");
    const cityName: any = localStorage.getItem("Citycode");


    // if (cityPincode && cityPincode != "undefined" && cityPincode!=null) {

    if (cityPincode !== "undefined" && cityPincode !== 0 && cityPincode !== undefined) {
      setPincode(cityPincode);
      SetApplyPincode(cityPincode);
      if (cityName) {
        setCity(cityName);
      }
    }
    // }else{
    //   console.log("else");
    //   setPincode("");
    //   SetApplyPincode("");
    // }


  }, [applyPincode])

  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();
      }
    });
  };

  const pincodeFinalArray = <Menu items={pincodeData}></Menu>;
  return (
    <>
      <div
        className={`${styles.pincode} mx-2 cursor-pointer`}
        onClick={showModal}
      >
        <div className={`${styles.icon} flex justify-center content-center`}>
          <EnvironmentOutlined style={{ color: "#F3465F" }} />
        </div>
        <div>
          <div className={`${styles.greetings}`}>
            {applyPincode ? "Deliver to" : "Hello"}
          </div>
          <div className={`${styles.city}`}>
            {applyPincode ? `${city} ${applyPincode}` : "Select your address"}
          </div>
        </div>
      </div>
      {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}

      /> : null}

      {isAddressVisible ? (
        <ListAddress
          handleAddressClose={() => {
            setIsAddressVisible(false);
          }}

          addressSelect={addressSelect}
          loginRes={loginRes}
          isAddressVisible={isAddressVisible}
        />
      ) : null}
      <OTPModal
        handleOTPClose={() => {
          setIsOTPModalVisible(false);
        }}
        isOTPModalVisible={isOTPModalVisible}
        stateArray={props?.stateArray}
      />
      {isMobileOTPModalVisible ? <NewModalSignIn
        handleMobileClose={() => {
          setIsMobileOTPModalVisible(false);
        }}
        isMobileModalVisible={isMobileOTPModalVisible}
      /> : null}

    </>
  );
};

export default Pincode;