import { FC, useEffect, useState } from "react";
import styles from "./listAddress.module.scss";
import * as commonApi from "../../../pages/api/common"; 
import { baseUrl } from "../../../constants/urls";
import { Button, Input, Modal, notification } from "antd";
const ListAddress:FC<any> = (props)=>{
    const{ isAddressVisible,handleAddressClose,loginRes,addressSelect} = props;
    const [addresses,setAddresses] = useState<any>([]);
    const [selectAddress,setSelectAddress] = useState<any>({});
    const [ pincode , setPincode] = useState("");

    useEffect(() => {
       
        commonApi.getRequestWithToken(`${baseUrl}/api/addresses?token=true`,loginRes?.token).then((res)=>{
          
            setAddresses(res?.data?.data)
        })
        commonApi.getRequestWithToken(`${baseUrl}/api/customer-pincodes/get-data?token=true&customer_id=${loginRes?.data?.id}`,loginRes?.token).then((res)=>{
          
          const addrs = res?.data?.data === null ? {}:res?.data?.data
          
          setSelectAddress(addrs)
        })
    }, [loginRes]);

    const handlePincodeChange = ()=>{
        if (pincode.length === 6) {
            const data={
                id:0,
                postcode:pincode
            }
            addressSelect(data);
        }else{
            notification.error({message:"Please Enter Valid Pin"});
        }
        
    }
    console.log('selectAddress ====================================')
    console.log(selectAddress)
    console.log(addresses,'addresses ====================================')
    
    return(
        <>
        <Modal
        visible={isAddressVisible}
        width={400}
        maskClosable={false}
        onOk={handleAddressClose}
        onCancel={handleAddressClose}
        footer={null}
        destroyOnClose={true}
        title="Choose your location"
      >
          <div className={styles.listContainer}>
          <div className={styles.addressText}>Select a delivery location to see product availability and delivery options</div>
          {addresses.map((address:any,indx:number)=>{
              return<div key={indx} onClick={()=>addressSelect(address)} className="cursor-pointer">
                  <div className={selectAddress.address_id===address.id?styles.activeAddressContainer:styles.addressContainer}>
                      <span className={styles.nameText}>{address.first_name} {address.last_name} &nbsp;</span>
                      <span>{address.address1} , {address.city},{address.state} , {address.postcode}</span>
                  </div>
              </div>
          })}

          <div className={styles.orText}>or enter an Indian pincode</div>
          <Input.Group compact>
              <Input
                maxLength={6}
                 value={pincode}
                placeholder="Enter Pincode"
                style={{ width: "60%", height: "40px" }}
                onChange={(e) => setPincode(e?.target?.value)}
              />
              <Button
                type="primary"
                style={{ height: "40px",width:"40%" }}
                 onClick={handlePincodeChange}
              >
                Apply
              </Button>
            </Input.Group>
            </div>
      </Modal>
        </>
    )
}

export default ListAddress;