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

import GooglePlacesAutocomplete, {
  geocodeByAddress,
  geocodeByPlaceId,
  getLatLng,
} from "react-google-places-autocomplete";
import Geocode from "react-geocode";
import { APIKEY } from "../../../constants/urls";
const EditAddressModal: FC<any> = (props) => {
  const { modalVisible, onCloseAdress, id } = props;
  const [firstname, setFirstName] = useState("");
  const [lastname, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  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 [preferDelivery, setPreferDelivery] = useState("office");
  const [preferTime, setPreferTime] = useState("10 am - 6 pm");
  const [countrySort, setCountrySort] = useState("");
  const [country, setCountry] = useState("");
  const [deliveryInstructions, setDeliveryInstructions] = useState("");
  const [loginRes, setLoginRes] = useState<any>({});
  const [details, setDetails] = useState<any>({});
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);
  const [isMyInputFocused, setIsMyInputFocused] = useState(false);
  const [defaultAddress, setDefaultAddress] = useState(false)
  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
    const params = {
      id: id,
      token: details?.token,
    };

    AddressApi.getAdressesByID(params).then((res) => {
      Geocode.setApiKey(APIKEY);
      Geocode.enableDebug();

      const addrs = res?.data?.address1.split("\n");


      setDetails(res?.data);
      setFirstName(res?.data?.first_name);
      setLastName(res?.data?.last_name);
      setAddress1(addrs?.[1]);
      setAddress2(addrs?.[0]);
      setLandmark(addrs?.[2]);
      setPhone(res?.data?.phone);
      setCity(res?.data?.city);
      setCountry(res?.data?.country_name);
      setCountrySort(res?.data?.country);
      setState(res?.data?.state);
      setPincode(res?.data?.postcode);
      setPreferDelivery(res?.data?.prefer_delivery);
      setPreferTime(res?.data?.prefer_time);
      setLatitude(res?.data?.latitude);
      setLongitude(res?.data?.longitude);
      setDefaultAddress(res?.data?.default_address);
      if (res?.data?.longitude === null) {
        Geocode.fromAddress(addrs?.[1]).then(
          (response) => {
            const { lat, lng } = response.results[0].geometry.location;
            console.log(lat, lng);
            setLatitude(lat);
            setLongitude(lng);
          },
          (error) => {
            console.error(error);
          }
        );
      }
    });
  }, [id]);
  const emptyData = () => {
    setFirstName("");
    setLastName("");
    setAddress1("");
    setAddress2("");
    setLandmark("");
    setPhone("");
    setCity("");
    setState("");
    setPincode("");
    setLatitude(null);
    setLongitude(null);
  };

  const UpdateAddress = () => {
    const params = {
      id: details?.id,
      address1: address1,
      address2: address2,
      city: city,
      country: countrySort,
      country_name: country,
      phone: phone,
      landmark: landmark,
      postcode: pincode,
      state: state,
      firstname: firstname,
      lastname: lastname,
      prefer_delivery: preferDelivery,
      prefer_time: preferTime,
      delivery_instructions: deliveryInstructions,
      token: loginRes?.token,
      longitude: longitude,
      latitude: latitude,
      default_address: defaultAddress
    };

    AddressApi.updateAdress(params).then((res) => {
      notification.success({ message: 'Address Update Successfully' })
      emptyData();
      onCloseAdress();
    });
  };
  const radioSelect = (evt: any) => {
    setPreferDelivery(evt);
    const time = evt === "home" ? "7 am - 9 pm" : "10 am - 6 pm";
    setPreferTime(time);
  };

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

    if (postalCode !== "") {
      setPincode(postalCode);
    }
    const { long_name: locality = "" } =
      place.address_components.find((c) => c.types.includes("locality")) || {};
    // setCity(locality);

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


  };

  const suffix = (<Image src={"/images/Google_Maps_icon.png"} alt="map" preview={false} height={"20px"} />)

  return (
    <>
      <Modal
        visible={modalVisible}
        width={400}
        style={{ width: "350px", position: "absolute", right: 0, top: 0 }}
        onOk={onCloseAdress}
        onCancel={() => {
          onCloseAdress();
          emptyData();
        }}
        footer={null}
        destroyOnClose={true}
        bodyStyle={{ height: "100%" }}
        maskClosable={false}
      >
        <h2 className={styles.h2Tittle}> Edit a Address</h2>
        <div className={styles.formMain}>
          <Form name="normal_login" className="login-form" layout="vertical">
            <span className={cx("ant-row")}>
              <Form.Item
                label="First Name"
                className={cx("ant-col ant-col-xl-12")}
              >
                <Input
                  placeholder="Enter First Name"
                  value={firstname}
                  onChange={(evt) => {
                    setFirstName(evt.target.value);
                  }}
                />
              </Form.Item>
              <Form.Item
                label="Last Name"
                className={cx(styles.formSpan, "ant-col ant-col-xl-12")}
              >
                <Input
                  placeholder="Enter Last Name"
                  value={lastname}
                  onChange={(evt) => {
                    setLastName(evt.target.value);
                  }}
                />
              </Form.Item>
            </span>

            <Form.Item label="Address1" className={cx("tss-pb-2")}>
              {isMyInputFocused ? (
                <GooglePlacesAutocomplete
                  apiKey={APIKEY}
                  selectProps={{
                    isClearable: true,
                    maxLength: 120,
                    onChange: (val: any) => {
                      handleSelect(val);
                    },
                  }}
                />
              ) : (
                <Input
                  placeholder="Enter Flat, House no, Building, Company, Apartment"
                  value={address1}
                  onChange={(evt) => {
                    setAddress1(evt.target.value);
                  }}
                  onBlur={() => setIsMyInputFocused(false)}
                  onFocus={() => setIsMyInputFocused(true)}
                  suffix={suffix}
                />
              )}
            </Form.Item>
            <Form.Item label="Address2" className={cx("tss-pb-2")}>
              <Input
                maxLength={50}
                placeholder="Enter Area, Street, Sector, Village"
                value={address2}
                onChange={(evt) => {
                  setAddress2(evt.target.value);
                }}
              />
            </Form.Item>
            <Form.Item label="Landmark" className={cx("tss-pb-2")}>
              <Input
                maxLength={30}
                placeholder="Enter Landmark"
                value={landmark}
                onChange={(evt) => {
                  setLandmark(evt.target.value);
                }}
              />
            </Form.Item>
            <span className={cx("ant-row")}>
              <Form.Item label="State" className={cx("ant-col ant-col-xl-12")}>
                <Input
                  placeholder="Enter State  "
                  value={state}
                  onChange={(evt) => {
                    setState(evt.target.value);
                  }}
                />
              </Form.Item>
              <Form.Item
                label="City"
                className={cx(styles.formSpan, "ant-col ant-col-xl-12")}
              >
                <Input
                  placeholder="Enter City"
                  value={city}
                  onChange={(evt) => {
                    setCity(evt.target.value);
                  }}
                />
              </Form.Item>
            </span>
            <span className={cx("ant-row")}>
              <Form.Item
                label="Country"
                className={cx("ant-col ant-col-xl-12")}
              >
                <Input
                  placeholder="Enter Country  "
                  value={country}
                  onChange={(evt) => {
                    setCountry(evt.target.value);
                  }}
                />
              </Form.Item>
              <Form.Item
                label="Pincode"
                className={cx(styles.formSpan, "ant-col ant-col-xl-12")}
              >
                <Input
                  placeholder="Enter Pincode"
                  value={pincode}
                  onChange={(evt) => {
                    setPincode(evt.target.value);
                  }}
                />
              </Form.Item>
            </span>
            <Form.Item label="Phone Number" className={cx("tss-pb-2")}
              // name="phoneNumber"
              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 label="Select Preference" className={cx("tss-pb-2")}>
              <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"
              className={cx("tss-pb-2")}
            >
              <Input
                readOnly
                placeholder="Enter Phone Number"
                value={preferTime}
                onChange={(evt) => {
                  setPreferTime(evt.target.value);
                }}
              />
            </Form.Item>
          </Form>
          <div className={cx("my-2")}>
            <Button type="primary" onClick={UpdateAddress}>
              Edit Address
            </Button>
            <Button
              type="primary"
              ghost
              className={cx("ml-3")}
              onClick={onCloseAdress}
            >
              Cancel
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
};

export default EditAddressModal;