import { Button, Dropdown, Input, InputNumber, Menu, Modal } from "antd";
import _ from "lodash";
import { FC, useEffect, useState } from "react";
import {
  DownOutlined,
  CheckCircleTwoTone,
  CheckCircleOutlined,
  CheckCircleFilled,
} from "@ant-design/icons";
import cx from "classnames";
import styles from "./pincodeModel.module.scss";
import * as CommonApi from "../../../pages/api/common";
import { baseUrl } from "../../../constants/urls";
import { useMediaQuery } from "react-responsive";
import OTPModal from "../otpModal/OTPModal";

const Separator = () => {
  return (
    <div className="flex flex-col items-center justify-center">
      <span>|</span>
      <span style={{ marginTop: "-10px" }}>|</span>
      <span style={{ margin: "4px" }}>Or</span>
      <span>|</span>
      <span style={{ marginTop: "-10px" }}>|</span>
    </div>
  );
};

const PincodeModal: FC<any> = (props) => {
  const {
    isOpen,
    handleOk,
    handleCancel,
    handlePincodeChange,
    addressSelect,
    pincode,
    setPincode,
    applyPincode,
    SetApplyPincode,
    newSelect,
    setNewSelect,
    isOTPModalVisible,
    setIsOTPModalVisible,
    setIsMobileOTPModalVisible,
  } = props;

  const isMobile =  useMediaQuery({ maxWidth: 767.68 });

  const [city, setCity] = useState("Hyderabad");
  const [loginRes, setLoginRes] = useState<any>({});
  const [pincodeData, setPincodeData] = useState<any>([]);
  const [isAddressVisible, setIsAddressVisible] = useState(false);


  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
   
    if (details?.data?.id) {
      CommonApi.getRequestWithToken(
        `${baseUrl}/api/customer-pincodes/list-data?token=true&customer_id=${details?.data?.id}`,
        details?.token
      ).then((res) => {
        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);
          localStorage.setItem("Citycode", Selectres?.data?.data?.city);
          const finalArray: any = [];
         
          res?.data?.data.forEach((element: any, key: number) => {
            let new_val={}
            if( element.postcode!=null){
              new_val = {
              key: key,
              label: element.postcode,
              onClick: () => {
                addressSelect(element);
              },

              icon:
                `${Selectres?.data?.data?.pincode}` === element.postcode ? (
                  <CheckCircleFilled style={{ color: "#291C61" }} />
                ) : (
                  <CheckCircleOutlined />
                ),
              className: styles.labelDataPartner,
            };
          }
            finalArray.push(new_val);
          });

          setPincodeData(finalArray);
        });
      });
    }
    const cityPincode = localStorage.getItem("PinCode");
    const cityName = localStorage.getItem("Citycode");
    setNewSelect(cityPincode);
  }, []);


  const SetUpOTP = ()=>{
    
    handleOk()
    setIsOTPModalVisible(true);
    
   
  }

  const pincodeFinalArray = <Menu items={pincodeData}></Menu>;
  return (
    <>
      <Modal
        visible={isOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
       
        width={isMobile?"80%":"600px"}
        className={styles.modalClass}
      >
        <div className={cx("ant-row items-center",styles.topClass)}>
          <div className="ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-11 mt-2">
            <Input.Group compact className={styles.modaInput}>
              <Input
                
                className={"numberInput"}
                type="number"
                value={pincode}
                placeholder="Enter Pincode"
                style={{ width: isMobile?"70%":"180px", height: "40px" }}
                onChange={(e) => setPincode(e?.target?.value)}
                maxLength={6}
              />
              <Button
                type="primary"
                style={{ height: "40px", width:isMobile?"30%":"auto" }}
                onClick={handlePincodeChange}
              >
                Apply 
              </Button>
            </Input.Group>
          </div>
          <div className="ant-col ant-col-xs-0 ant-col-md-0 ant-col-xl-2 mt-2"><Separator /></div>
          <div className="ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-11 mt-2">
            {_.isEmpty(loginRes) ? (
              <Button
                type="primary"
                style={{ width: "180px", height: "40px" }}
                onClick={SetUpOTP}
              >
                Sign In / Sign Up
              </Button>
            ) : (
              <div
                style={{
                  width: "100%",
                  textAlign: "center",
                  fontSize: "16px",
                  cursor: "pointer",
                }}
                // onClick={()=>{setIsAddressVisible(true);handleCancel()}}
              >
                <Dropdown
                  overlay={pincodeFinalArray}
                  className={cx(styles.dropdownParent)}
                  trigger={["click"]}
                >
                  <a onClick={(e) => e.preventDefault()}>
                    <span className={cx(styles.dropdownParentSpan)}>
                      {newSelect !== "undefined" && newSelect !== "" && newSelect !== undefined
                        ? newSelect :"Select your Delivery Pincode"
                        }
                    </span>
                    <DownOutlined
                      style={{ fontSize: "16px", paddingLeft: "4px" }}
                    />
                  </a>
                </Dropdown>
                {/* {pincodeData.map((address:any,indx:number)=>{
              return<div key={indx} onClick={()=>addressSelect(address)} className="cursor-pointer">
                  <div className={styles.addressContainer}>
                      <span className={styles.nameText}>{address.postcode} </span>
                     
                  </div>
              </div>
          })} */}
              </div>
            )}
          </div>
          {/* <Separator />
          <div>
            <Button
              style={{ width: "180px", height: "40px" }}
              onClick={handleCategorySelect}
            >
              Explore Products
            </Button>
          </div> */}
        </div>
      </Modal>
      
    </>
  );
};

export default PincodeModal;