import { Button, Form, Input, Modal, notification, Radio } from "antd";
import { FC, useEffect, useState } from "react";
import styles from "./addressModal.module.scss";
import * as AddressApi from "../../../pages/api/address";
import * as ProfileApi from "../../../pages/api/profile";

import cx from "classnames";
// import Autocomplete from "react-google-autocomplete";
import ReactGoogleAutocomplete from "react-google-autocomplete";
import GooglePlacesAutocomplete, {
  geocodeByAddress,
  geocodeByPlaceId,
  getLatLng,
} from "react-google-places-autocomplete";
import { APIKEY } from "../../../constants/urls";

const AddressModal: FC<any> = (props) => {
  const { modalVisible, onCloseAdress,stateArray } = props;
  const [firstname, setFirstName] = useState("");

  const [lastname, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [form] = Form.useForm<any>();
  const [pincode, setPincode] = useState("");
  const [address1, setAddress1] = useState("");
  const [address2, setAddress2] = useState("");
  const [landmark, setLandmark] = useState("");
  const [city, setCity] = useState("");
  const [state, setState] = useState("");
  const [country, setCountry] = useState("");
  const [countrySort, setCountrySort] = useState("");
  const [loginRes, setLoginRes] = useState<any>({});
  const [address, setAddress] = useState<any>();
  const [addressObj, setAddressObj] = useState<any>();
  const [preferDelivery, setPreferDelivery] = useState("office");
  const [preferTime, setPreferTime] = useState("10 am - 6 pm");
  const [deliveryInstruction, setDeliveryInstruction] = useState("");
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);
  const [userData, setUserData] = useState<any>({});
  const [stateCode,setStateCode] = useState("");
  const [companyName,setCompanyName] = useState("");
  const addAddress = () => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);

    setLoginRes(details);
   const val1 =  userData?.data?.company_gst?.substring(0,2);
 
if(stateCode==val1 || val1=="" ||val1 == undefined){
    const params = {
      address1: address1,
      address2: address2,
      city: city,
      country: countrySort,
      country_name: country,
      phone: phone,
      landmark: landmark,
      postcode: pincode,
      state: state,
      firstname: firstname,
      lastname: lastname,
      token: details.token,
      prefer_delivery: preferDelivery,
      prefer_time: preferTime,
      delivery_instruction: deliveryInstruction,
      longitude: longitude,
      latitude: latitude,
      state_code:stateCode,
      company_name:companyName
    };
    AddressApi.addAdress(params).then((res) => {
      notification.success({ message: "Address Add Successfully" });
      onCloseAdress();
      resetForm();
    });
  }else{
    notification.error({message:"Please Enter the Address in the same state as GST Number"})
  }
  };

  const resetForm = () => {
    setFirstName("");
    setLastName("");
    setEmail("");
    setPhone("");
    setPincode("");
    setAddress1("");
    setAddress2("");
    setLandmark("");
    setCity("");
    setState("");
    setCountry("");
    setCountrySort("");
    setPreferDelivery("office");
    setPreferTime("10 am - 6 pm");
    setDeliveryInstruction("");
    setCompanyName("");
    form.resetFields();
  };

  const handleSelect = async (address: any) => {
    const address_lab =address?.label?.split(","); 
    const ddd  = address_lab?.splice(address_lab?.length - 2, 2);
    setAddress1(address_lab?.toString());
    form.setFieldsValue({
      address1: address_lab?.toString(),
    });
    const [place] = await geocodeByPlaceId(address?.value?.place_id);
    const lng: any = place.geometry.location.lng();
    const lat: any = place.geometry.location.lat();

    setLatitude(lat);
    setLongitude(lng);

    const { long_name: postalCode = "" } =
      place.address_components.find((c) => c.types.includes("postal_code")) ||
      {};
    setPincode(postalCode);
    form.setFieldsValue({
      pincode: postalCode,
    });

  
    const { long_name: locality = "" } =
      place.address_components.find((c) => c.types.includes("locality")) || {};
      console.log(locality, "locality");
      form.setFieldsValue({
        city: locality,
      });
      
     setCity(locality);

    const { long_name: administrative_area_level_1 = "" } =
      place.address_components.find((c) =>
        c.types.includes("administrative_area_level_1")
      ) || {};
    form.setFieldsValue({
      state: administrative_area_level_1,
    });
    const val = stateArray.find((element:any) => element.state_name == administrative_area_level_1);

setStateCode(val?.state_code);

    
    setState(administrative_area_level_1);
    const { long_name: country = "" } =
      place.address_components.find((c) => c.types.includes("country")) || {};
    setCountry(country);
    form.setFieldsValue({
      country: country,
    });
    const { short_name: countryCode = "" } =
      place.address_components.find((c) => c.types.includes("country")) || {};
    setCountrySort(countryCode);
  };

  const radioSelect = (evt: any) => {
    setPreferDelivery(evt);
    const time = evt === "home" ? "7 am - 9 pm" : "10 am - 6 pm";
    form.setFieldsValue({
      deliveryTime: time,
    });
    setPreferTime(time);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  const closeForm =()=>{
    resetForm();
    onCloseAdress()
  }

  useEffect(()=>{
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
    const params = details?.token;
    ProfileApi.getProfile(params).then((data) => setUserData(data));
    form.setFieldsValue({
      firstName: details?.data?.first_name,
    });
    form.setFieldsValue({
      lastName: details?.data?.last_name,
    });

    form.setFieldsValue({
      phoneNumber: details?.data?.phone,
    });
    form.setFieldsValue({
      companyName: details?.data?.company_name,
    });
    setFirstName(details?.data?.first_name);
    setLastName(details?.data?.last_name);
    setPhone(details?.data?.phone);
    setCompanyName(details?.data?.company_name)

  },[])
  
  return (
    <>
      <Modal
        visible={modalVisible}
        width={400}
        style={{ width: "350px", position: "absolute", right: 0, top: 0 }}
        onOk={closeForm}
        onCancel={closeForm}
        footer={null}
        destroyOnClose={true}
        maskClosable={false}
        bodyStyle={{ height: "100%" }}
      >
        <h2 className={styles.h2Tittle}> Add a New Address</h2>
        <div className={styles.formMain}>
          <Form
            name="normal_login"
            className="login-form"
            layout="vertical"
            initialValues={{ remember: true }}
            onFinish={addAddress}
            onFinishFailed={onFinishFailed}
            autoComplete="on"
            form={form}
          >
            <span className={cx("ant-row")}>
              <Form.Item
                name="firstName"
                label="First Name"
                className={cx("ant-col ant-col-xs-24 ant-col-xl-12")}
                rules={[
                  { required: true, message: "Please Enter First Name!" },
                ]}
              >
                <Input
                  placeholder="Enter First Name"
                  value={firstname}
                  onChange={(evt) => {
                    setFirstName(evt.target.value);
                  }}
                />
              </Form.Item>
              <Form.Item
                name="lastName"
                label="Last Name"
                className={cx(styles.formSpan, "ant-col ant-col-xs-24 ant-col-xl-12")}
                rules={[{ required: true, message: "Please Enter Last Name!" }]}
              >
                <Input
                  placeholder="Enter Last Name"
                  value={lastname}
                  onChange={(evt) => {
                    setLastName(evt.target.value);
                  }}
                />
              </Form.Item>
            </span>
            {<Form.Item
                name="companyName"
                label="Company Name"
                className={cx("ant-col ant-col-xs-24 ant-col-xl-24")}
               
              >
                <Input
                  placeholder="Enter Company Name"
                  value={companyName}
                  onChange={(evt) => {
                    setCompanyName(evt.target.value);
                  }}
                  
                />
              </Form.Item>}
            <Form.Item
              name="address1"
              rules={[{ required: true, message: "Please Select Address!" }]}
              label="Location (Search in Google) "
              className={cx(styles.googlemapDropDown)}
            >
              {/* <ReactGoogleAutocomplete
  apiKey={"AIzaSyBZni8idlD0ZRF9Og0a8OZ8vmFmd_JTif4"}
  onPlaceSelected={(place:any) => console.log(place)}
/> */}
              <GooglePlacesAutocomplete
                apiKey={APIKEY}                
                selectProps={{
                  isClearable: true,
                  maxLength: 120,
                  onChange: (val: any) => {
                    handleSelect(val);
                  },
                  onPress: (data: any, details: any = null) => {
                    // 'details' is provided when fetchDetails = true
                    console.log("->latitude: ", details.geometry);
                  },
                }}
              />
              {/* <Input  placeholder="Enter Flat, House no, Building, Company, Apartment" value={address1} onChange={(evt)=>{setAddress1(evt.target.value)}}/> */}
            </Form.Item>
            <Form.Item
              name="address2"
              label="Address2"
              rules={[
                {
                  required: true,
                  message: "Please Enter Area, Street, Sector, Village!",
                },
                {
                  pattern: /^[a-zA-Z0-9 ,\-\/_]+$/,
                  message: "Please enter only alphabets in the Area, Street, Sector, Village!"
                }
                
              ]}
            >
              <Input
                maxLength={50}
                placeholder="Enter Area, Street, Sector, Village"
                value={address2}
                onChange={(evt) => {
                  setAddress2(evt.target.value);
                }}
              />
            </Form.Item>
            <Form.Item label="Landmark" name="landmark">
              <Input
                maxLength={50}
                placeholder="Enter Landmark"
                value={landmark}
                onChange={(evt) => {
                  setLandmark(evt.target.value);
                }}
              />
            </Form.Item>
            <span className={cx("ant-row")}>
              <Form.Item
                name="state"
                label="State"
                className={cx("ant-col ant-col-xs-24 ant-col-xl-12")}
                rules={[{ required: true, message: "Please Enter State!" }]}
              >
                <Input
                  placeholder="Enter State  "
                  value={state}
                  onChange={(evt) => {
                    setState(evt.target.value);
                  }}
                />
              </Form.Item>
              <Form.Item
                name="city"
                label="City"
                className={cx(styles.formSpan, "ant-col ant-col-xs-24 ant-col-xl-12")}
                rules={[ {
                  required: true,
                  message: "Please Enter City!",
                },
                {
                  pattern: /^[a-zA-Z][a-zA-Z ]+$/,
                  message: "Please enter only alphabets in the City!"
                }]}
              >
                <Input
                  placeholder="Enter City"
                  value={city}
                  onChange={(evt) => {
                    setCity(evt.target.value);
                  }}
                />
              </Form.Item>
            </span>
            <span className={cx("ant-row")}>
              <Form.Item
                name="country"
                label="Country"
                className={cx("ant-col ant-col-xs-24 ant-col-xl-12")}
                rules={[
                  { required: true, message: "Please Enter Country Name!" },
                ]}
              >
                <Input
                  placeholder="Enter Country  "
                  value={country}
                  onChange={(evt) => {
                    setCountry(evt.target.value);
                  }}
                />
              </Form.Item>
              <Form.Item
                name="pincode"
                rules={[{ required: true, message: "Please Enter Pincode!" }]}
                label="Pincode"
                className={cx(styles.formSpan, "ant-col ant-col-xs-24 ant-col-xl-12")}
              >
                <Input
                  placeholder="Enter Pincode"
                  value={pincode}
                  onChange={(evt) => {
                    setPincode(evt.target.value);
                  }}
                />
              </Form.Item>
            </span>
            <Form.Item
              name="phoneNumber"
              label="Phone Number"
              rules={[
                {
                  required: true,
                  pattern: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
                  message: `Enter Valid Phone Number`,
                },
              ]}
            >
              <Input
                placeholder="Enter Phone Number"
                value={phone}
                onChange={(evt) => {
                  setPhone(evt.target.value);
                }}
              />
            </Form.Item>
            <Form.Item name="preference" label="Select Preference">
              <Radio.Group
                value={preferDelivery}
                onChange={(evt) => radioSelect(evt.target.value)}
              >
                <Radio value={"home"}>Home</Radio>
                <Radio value={"office"}>Office</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item label="Preferable Delivery Time" name="deliveryTime">
              <Input
                readOnly
                placeholder="Preferable Delivery Time"
                value={preferTime}
                onChange={(evt) => {
                  setPreferTime(evt.target.value);
                }}
              />
            </Form.Item>
            <Form.Item label="Delivery Instructions" name="instruction">
              <Input
                placeholder="Delivery Instructions"
                value={deliveryInstruction}
                onChange={(evt) => {
                  setDeliveryInstruction(evt.target.value);
                }}
              />
            </Form.Item>
            <Form.Item className={cx("my-2")}>
              <Button
                type="primary"
                htmlType="submit"
                style={{ height: "42px", padding: "0 1.75rem" }}
              >
                Add Address
              </Button>
              <Button
                type="primary"
                ghost
                className={cx("ml-3")}
                onClick={onCloseAdress}
                style={{ height: "42px", padding: "0 1.75rem" }}
              >
                Cancel
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </>
  );
};

export default AddressModal;