import styles from "./personalDetails.module.scss";
import { UploadOutlined, InfoCircleOutlined } from "@ant-design/icons";
import cx from "classnames";
import { Typography, Form, Radio, Input, Select, Upload, Button } from "antd";
import IntlTelInput, { CountryData } from "react-intl-tel-input";
import { useEffect, useState } from "react";
import { APIKEY, baseUrl } from "../../../../constants/urls";
import { statesList } from "../../../../constants/IndianStates";
const { Text } = Typography;
const { Option } = Select;
import Geocode from "react-geocode";
import GooglePlacesAutocomplete, {
  geocodeByAddress,
  geocodeByPlaceId,
  getLatLng,
} from "react-google-places-autocomplete";

const PersonalDetails = (props: any) => {
  const [form] = Form.useForm();
  const [sessionData, setSessionData] = useState<any>('');
  const [errorMsg, setErrormag] = useState<any>('');
  const [mapAddress, setMapAddress] = useState<any>('');
  const [pState, setPState] = useState<any>('');
  const [isReady, setOldData] = useState<any>(false);

  const onFinish = (e: any) => {
    if (props.current == 3) {
      props.formData(e);
    }
  }
  const _keydata: any = (sessionStorage.getItem('VendorOnBoarding'));
  let data: any = {
    token: '',
    phone: ''
  }
  if (_keydata != '') {
    data = JSON.parse(_keydata);
  }

  const uploadProps: any = {
    action: `${baseUrl}/api/vendor-certificationsUpload`,
    multiple: false,
    showUploadList: true,
    data: { token: data.token, type: 'logo' },

  };
  const getFileData = (files: any) => {
    const _f: any = [];
    files.map((file: any) => {
      if (file.response && file.response.file)
        _f.push(file.response.file)
    });
    return _f;
  }
  const uploadedFilesListGST = (e: any) => {
    if (props.current == 3) {
      form.setFieldsValue({
        ['logo']: getFileData(e.fileList)
      })
      form.submit();
    }
  }
  const baseName = (str: any) => {
    let base = new String(str).substring(str.lastIndexOf('/') + 1);
    if (base.lastIndexOf(".") != -1)
      base = base.substring(0, base.lastIndexOf("."));
    return base;
  }
  const makeUploadFiles = (files: any) => {
    const _itms = [];
    if (files && files.length > 0) {
      for (let i = 0; i < files.length; i++) {
        if (files[i].url) {
          const _obj = {
            uid: "-" + (i + 1),
            name: baseName(baseUrl + "/storage/" + files[i].url),
            status: 'done',
            url: baseUrl + "/storage/" + files[i].url,
          }
          _itms.push(_obj);
        }
      }

    }
    return _itms;
  }
  const makeUploadFilesLocal = (files: any) => {
    const _itms = [];
    if (files && files.length > 0) {
      for (let i = 0; i < files.length; i++) {
        if (files[i]) {
          _itms.push(files[i].url);
        }
      }

    }
    return _itms;
  }

  const handleSelect = async (address: any) => {
    if (!address?.label) {
      return;
    }

    const address_lab = address?.label?.split(",");

    form.setFieldsValue({
      p_address1: address_lab[0] || '',
    });
    form.setFieldsValue({
      p_address2: address_lab[1] || '',
    });
    setMapAddress((address_lab || ''));

    const [place] = await geocodeByPlaceId(address?.value?.place_id);
    const lng: any = place.geometry.location.lng();
    form.setFieldsValue({
      p_longitude: lng,
    });

    const lat: any = place.geometry.location.lat();
    form.setFieldsValue({
      p_latitude: lat,
    });

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

    const { long_name: locality = "" } = place.address_components.find((c) => c.types.includes("locality")) || {};
    form.setFieldsValue({
      p_city: locality,
    });
    const _address_lab = address?.label?.split(",")

    const _s = statesList.filter((state: any) => {
      return state.label == ((_address_lab[_address_lab.length - 2] || '').trim());
    });

    console.log(_s)
    form.setFieldsValue({
      p_state: (_s.length > 0) ? _s[0].value : '',
    });
    setPState(form.getFieldValue('p_state'));
  };


  useEffect(() => {
   
    const _keydata: any = (sessionStorage.getItem('VendorOnBoarding'));
    const tax: any = sessionStorage.getItem('taxDetails');
    const final_tax:any =JSON.parse(tax)
   
    const states_val = statesList.find((res:any)=>res.label ==final_tax?.data?.pradr?.addr?.stcd)
   
    Geocode.setApiKey(APIKEY);
    Geocode.enableDebug();
    form.setFieldsValue({
      ['p_address2']:final_tax?.data?.pradr?.addr?.bnm +","+ final_tax?.data?.pradr?.addr?.st,
      ['p_address1']:final_tax?.data?.pradr?.addr?.bno  +","+ final_tax?.data?.pradr?.addr?.loc,
      ['p_city']: final_tax?.data?.pradr?.addr?.dst,
      ['p_state']: states_val?.value,
          ['p_postcode']: final_tax?.data?.pradr?.addr?.pncd,
    })
    setPState(form.getFieldValue('p_state'));
    let place = "";
    Geocode.fromAddress(final_tax?.data?.pradr?.addr?.pncd).then(
      (response) => {
        console.log(response,"response")
         const { lat, lng } = response.results[0].geometry.location;
        
         place = response.results[0].formatted_address;
        form.setFieldsValue({
            p_latitude: lat,
            ['ssss']:data.ssss?data.ssss:response.results[0].formatted_address
          });
          form.setFieldsValue({
              p_longitude: lng,
            });
   

   
      },
      (error) => {
        console.error(error);
      }
    );
    form.setFieldsValue({
      ['address2']:final_tax?.data?.pradr?.addr?.bnm +","+ final_tax?.data?.pradr?.addr?.st,
      ['address1']:final_tax?.data?.pradr?.addr?.bno  +","+ final_tax?.data?.pradr?.addr?.loc,
      ['city']: final_tax?.data?.pradr?.addr?.dst,
      ['state']: states_val?.value,
          ['postcode']: final_tax?.data?.pradr?.addr?.pncd,
    })
    if (_keydata != '' && props.current == 3) {
      data = JSON.parse(_keydata);
      setSessionData(data?.phone);
      form.setFieldsValue({
        ['contact_number_1']: data?.phone,
      })
      console.log(place,"place")
      if (props?.steps?.[3]?.formData && (!props?.steps?.[3]?.formData?.address1 || props?.steps?.[3]?.formData?.address1 == '')) {
        form.setFieldsValue({
          ['whatsapp_number']: (data.whatsapp_number) ? data.whatsapp_number : '',
          ['contact_number_3']: (data.contact_number_3) ? data.contact_number_3 : '',
          ['contact_number_4']: (data.contact_number_4) ? data.contact_number_4 : '',
          ['are_you_a']: (data.are_you_a) ? data.are_you_a : 'Manufacturer',
          ['logo']: (data.logo) ? [...makeUploadFilesLocal(JSON.parse(data.logo))] : [],
          ['facebook']: data.facebook,
          ['twitter']: data.twitter,
          ['address1']: data.address1?data.address1:final_tax?.data?.pradr?.addr?.bno  +","+ final_tax?.data?.pradr?.addr?.loc,
          ['address2']: data.address2?data.address1:final_tax?.data?.pradr?.addr?.bnm +","+ final_tax?.data?.pradr?.addr?.st,
          ['city']: data.city?data.city:final_tax?.data?.pradr?.addr?.dst,
          ['state']: data.state? data.state:states_val?.value,
          ['postcode']: data.postcode?data.postcode:final_tax?.data?.pradr?.addr?.pncd,
          ['p_contact_name']: data.p_contact_name,
          ['p_contact_email']: data.p_contact_email,
          ['p_contact_number']: data.p_contact_number,
          ['p_latitude']: data.p_latitude,
          ['p_longitude']: data.p_longitude,
          ['p_address1']: data.p_street?data.p_street:final_tax?.data?.pradr?.addr?.bno  +","+ final_tax?.data?.pradr?.addr?.loc,
          ['p_address2']: data.p_address2?data.p_address2:final_tax?.data?.pradr?.addr?.bnm +","+ final_tax?.data?.pradr?.addr?.st,
          ['p_city']: data.p_city?data.p_city:final_tax?.data?.pradr?.addr?.dst,
          ['p_state']: data.p_state?data.p_state:states_val?.value,
          ['p_postcode']: data.p_postcode?data.p_postcode:final_tax?.data?.pradr?.addr?.pncd,
          ['contact_person_name']:data.contact_person_name,
          ['contact_email']:data.contact_email,
         
        })

        if (data.logo && data.logo != '') {
          uploadProps.fileList = [...makeUploadFiles(JSON.parse(data.logo))]
        }
      }
      // setPState(form.getFieldValue('p_state'));
      form.submit()
    }
    setTimeout(() => {
      setOldData(true)
    })

  }, [props.current]);

  
  return (
    <>
   
      {isReady == true &&
        <div className={(props.current == 3 ? cx("ant-row gutterRow") : ' hidden')}>
          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-18 gutterCol profile"
            )}
          >
            <Form
              form={form}
              name="normal_login"
              className="login-form"
              onFinish={onFinish}
               initialValues={{ remember: true }}
            
            >
              <h2 className={styles.leftTitle}>Point of Contact</h2>
              <div className={styles.formMain}>
                <h3 className={cx(styles.subTitle, styles.sellerTitle)}><span className={styles.spanHeading}>Contact Details</span></h3>


                <div className={cx("ant-row gutterRow pl-2")}>
                  <Form.Item name="contact_number_1" hidden={true} initialValue={form.getFieldValue('contact_number_1')}></Form.Item>
                  <Form.Item name="whatsapp_number" hidden={true} initialValue={form.getFieldValue('whatsapp_number')}></Form.Item>
                  <Form.Item name="contact_person_name" hidden={true} initialValue={form.getFieldValue('contact_person_name')}></Form.Item>
                  <Form.Item name="contact_number_3" hidden={true} initialValue={form.getFieldValue('contact_number_3')}></Form.Item>
                  <Form.Item name="contact_number_4" hidden={true} initialValue={form.getFieldValue('contact_number_4')}></Form.Item>
                  <Form.Item name="contact_number_4" hidden={true} initialValue={form.getFieldValue('contact_number_4')}></Form.Item>
                  <Form.Item name="state" hidden={true} initialValue={form.getFieldValue('state')}></Form.Item>
                  <Form.Item name="p_latitude" hidden={true} initialValue={form.getFieldValue('p_latitude')}></Form.Item>
                  <Form.Item name="p_longitude" hidden={true} initialValue={form.getFieldValue('p_longitude')}></Form.Item>
                  <Form.Item name="p_state" hidden={true} initialValue={form.getFieldValue('p_state')}></Form.Item>
                  <Form.Item name="logo" hidden={true} initialValue={''}></Form.Item>
                  <Form.Item
                      name="contact_person_name"
                      // initialValue={''}
                      label={<label>Name <span style={{color:"red"}}>*</span></label>}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-12 mb-3 gutterCol"
                      )}
                    >
                       {/* <span className={styles.starText1}>*</span> */}
                      <Input placeholder="Contact Name " value={form.getFieldValue('contact_person_name')} onChange={() => { form.submit(); }} />
                    </Form.Item>
                  <Form.Item
                    label="Contact Number (Primary)"
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol"
                    )}
                  >
                    <span className={styles.starText1}>*</span>
                    <IntlTelInput
                      // disabled
                      allowDropdown={false}
                      defaultCountry={'in'}
                      value={form.getFieldValue('contact_number_1')}
                      style={{
                        border: "1px solid #ccc",
                        padding: "4px 10px",
                        display: "block",
                        marginRight: "3px",
                        borderRadius: "5px",
                      }}
                      onPhoneNumberChange={(isValid: boolean,
                        value: string,
                        selectedCountryData: CountryData,
                        fullNumber: string,
                        extension: string) => {
                        // if(isValid){
                        form.setFieldsValue({
                          ['contact_number_1']: value
                        })
                        form.submit();
                        // }                     
                      }}
                      containerClassName="intl-tel-input"
                      inputClassName="inputDrop"
                      fieldName="contact_number_1_"
                      placeholder="Enter Your Number"
                      numberType="mobile"
                      preferredCountries={['in', 'gb']}
                    />
                  </Form.Item>
                  <Form.Item
                  label="Email"
                      name="contact_email"
                      // initialValue={''}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-12 mb-3 gutterCol"
                      )}
                    >
                      <Input placeholder="Contact Email " onChange={() => { form.submit(); }} />
                    </Form.Item>
                  <Form.Item
                    label="WhatsApp Number"
                     name="whatsapp_number"
                    // rules={[{ required: true, message: 'Please input your WhatsApp Number!' }]}
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol"
                    )}
                  >
                    <span className={styles.starText21}>*</span>
                    <IntlTelInput
                      allowDropdown={false}
                      defaultCountry={'in'}
                      value={form.getFieldValue('whatsapp_number')}
                      style={{
                        border: "1px solid #ccc",
                        padding: "4px 10px",
                        display: "block",
                        marginRight: "3px",
                        borderRadius: "5px",
                      }}
                      onPhoneNumberChange={(isValid: boolean,
                        value: string,
                        selectedCountryData: CountryData,
                        fullNumber: string,
                        extension: string) => {
                        // if(isValid){
                        form.setFieldsValue({
                          ['whatsapp_number']: value
                        })
                        form.submit();
                        //}                     
                      }}
                      containerClassName="intl-tel-input"
                      inputClassName="form-control"
                      fieldName="whatsapp_number"
                      placeholder="Enter Your Number"
                      numberType="mobile"
                      preferredCountries={['in', 'gb']}
                    />
                  </Form.Item>
                  <div className={styles.formLabel}>
                    &nbsp;
                  </div>
                  <Form.Item
                    label="AlterNative Contact Number "
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol"
                    )}
                  >
                    <IntlTelInput
                      allowDropdown={false}
                      defaultCountry={'in'}
                      value={form.getFieldValue('contact_number_3')}
                      style={{
                        border: "1px solid #ccc",
                        padding: "4px 10px",
                        display: "block",
                        marginRight: "3px",
                        borderRadius: "5px",
                      }}
                      onPhoneNumberChange={(isValid: boolean,
                        value: string,
                        selectedCountryData: CountryData,
                        fullNumber: string,
                        extension: string) => {
                        // if(isValid){
                        form.setFieldsValue({
                          ['contact_number_3']: value
                        })
                        form.submit();
                        //}                     
                      }}
                      containerClassName="intl-tel-input"
                      inputClassName="form-control"
                      fieldName="contact_number_3"
                      placeholder="Enter Your Number"
                      numberType="mobile"
                      preferredCountries={['in', 'gb']}
                    />
                  </Form.Item>
                  {/* <Form.Item
                    label="Contact Number 3"
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol"
                    )}

                  >
                    <IntlTelInput
                      allowDropdown={false}
                      defaultCountry={'in'}
                      value={form.getFieldValue('contact_number_4')}
                      style={{
                        border: "1px solid #ccc",
                        padding: "4px 10px",
                        display: "block",
                        marginRight: "3px",
                        borderRadius: "5px",
                      }}
                      onPhoneNumberChange={(isValid: boolean,
                        value: string,
                        selectedCountryData: CountryData,
                        fullNumber: string,
                        extension: string) => {
                        //if(isValid){
                        form.setFieldsValue({
                          ['contact_number_4']: value
                        })
                        form.submit();
                        //}                     
                      }}
                      containerClassName="intl-tel-input"
                      inputClassName="form-control"
                      fieldName="mobile"
                      placeholder="Enter Your Number"
                      numberType="mobile"
                      preferredCountries={['in', 'gb']}
                    />
                  </Form.Item> */}
                  <div className={styles.formLabel2}>
                    Are you a <span className={styles.starText}>*</span>
                  </div>
                  <Form.Item
                    name="are_you_a"
                    initialValue={'Manufacturer'}
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol"
                    )}
                  >
                    <Radio.Group name="radiogroup" defaultValue={'Manufacturer'} onChange={() => { form.submit(); }}>
                      <Radio value={'Manufacturer'}>Manufacturer</Radio>
                      <Radio value={'Distributor'}>Distributor</Radio>
                      <Radio value={'Retailer'}>Retailer</Radio>
                    </Radio.Group>
                  </Form.Item>
                </div>
                <h3 className={cx(styles.subTitle, styles.sellerTitle)}><span className={styles.spanHeading}>Social Handles</span></h3>
                <div className={cx("ant-row gutterRow pl-2")}>
                  <Form.Item
                    label="Facebook URL"
                    name="facebook"
                    initialValue={''}

                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol"
                    )}
                  >
                    <Input placeholder="Enter Your Facebook URL" onChange={() => { form.submit(); }} />
                  </Form.Item>
                  <Form.Item
                    label="Twitter URL"
                    name="twitter"
                    initialValue={''}
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol "
                    )}
                  >
                    <Input placeholder="Enter Your Twitter URL" onChange={() => { form.submit(); }} />
                  </Form.Item>
                  <h3 className={cx(styles.subTitle, styles.sellerTitle, styles.logo)}><span className={styles.spanHeading}>Upload logo</span></h3>
                  <Upload maxCount={1} {...uploadProps} listType="picture" onChange={uploadedFilesListGST}>
                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                  </Upload>
                </div>
              </div>
              <h3 className={cx(styles.subTitle, styles.sellerTitle)}><span className={styles.spanHeading}>Billing Address <span className={styles.starText}>*</span></span> </h3>
              <div className={cx("ant-row gutterRow pl-2")}>
                <div
                  className={cx(
                    "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol"
                  )}
                >
                  <div className={cx("ant-row gutterRow")}>
                    <Form.Item
                      name="address1"
                     
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol"
                      )}
                      // rules={[{ required: true, message: 'Room/Floor Building Number' }]}
                    >
                      <Input placeholder="Room/Floor Building Number " onChange={() => { form.submit(); }}  readOnly/>
                    </Form.Item>
                    <Form.Item
                      name="address2"
                      
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol"
                      )}
                      // rules={[{ required: true, message: 'Street /Locality / Landmark ' }]}
                    >
                      <Input placeholder="Street /Locality / Landmark " onChange={() => { form.submit(); }} readOnly/>
                    </Form.Item>
                    <Form.Item
                      name="city"
                      initialValue={''}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol"
                      )}
                      // rules={[{ required: true, message: 'Please Enter City Name ' }]}
                    >
                      <Input placeholder="City " onChange={() => { form.submit(); }} readOnly/>
                    </Form.Item>
                    <Select value={(form.getFieldValue('state') ? form.getFieldValue('state') : '')} className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol", styles.inputBusiness)} onChange={(e: any) => {
                      
                      form.setFieldsValue({
                        ['state']: e
                      });
                      form.submit();
                      
                    }} disabled={true}>
                      <Option value={''}>Select State</Option>
                      {(statesList as any).map((_s: any, index: any) => (
                        <Option key={index} value={_s.value}>{_s.label}</Option>
                      ))}
                    </Select>
                    <Form.Item
                      name="postcode"
                      // rules={[

                      //   {
                      //     required: true,
                      //     pattern: /^[1-9][0-9]{5}$/,
                      //     message: `Enter Valid Pincode`,
                      //   },
                      // ]}
                      initialValue={''}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol"
                      )}
                    >
                      <Input placeholder="Postcode " onChange={() => { form.submit(); }} readOnly/>
                    </Form.Item>
                  </div>
                </div>
                <div
                  className={cx(
                    "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol"
                  )}
                >
                  <div style={{ width: "100%" }}>
                    {/* <iframe
                    width="100%"
                    height="100%"
                    scrolling="no"
                    src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=1%20Grafton%20Street,%20Dublin,%20Ireland+(My%20Business%20Name)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
                  ></iframe> */}
                  </div>
                </div>
              </div>
              <h3 className={cx(styles.subTitle, styles.sellerTitle)}><span className={styles.spanHeading}>Contact Details of Delivery Handling <span className={styles.starText}>*</span></span> </h3>
              <div className={cx("ant-row gutterRow pl-2")}>
                <div
                  className={cx(
                    "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol"
                  )}
                >
                  <div className={cx("ant-row gutterRow")}>
                    <Form.Item
                      name="p_contact_name"
                      initialValue={''}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol"
                      )}
                    >
                      <Input placeholder="Contact Name " onChange={() => { form.submit(); }} />
                    </Form.Item>
                    <Form.Item
                      name="p_contact_email"
                      initialValue={''}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol"
                      )}
                    >
                      <Input placeholder="Contact Email " onChange={() => { form.submit(); }} />
                    </Form.Item>
                    <Form.Item
                      name="p_contact_number"
                      initialValue={''}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol"
                      )}
                    >
                      <Input placeholder="Contact Number " onChange={() => { form.submit(); }}   type={"number"}
                      className={cx("numberInput")}/>
                    </Form.Item>
                    <Form.Item
                      name="p_address1"
                      initialValue={''}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol"
                      )}
                    >
                      <Input placeholder="Room/Floor Building Number " onChange={() => { form.submit(); }} />
                    </Form.Item>
                    <Form.Item
                      name="p_address2"
                      initialValue={''}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol"
                      )}
                    >
                      <Input placeholder="Street /Locality / Landmark " onChange={() => { form.submit(); }} />
                    </Form.Item>
                    <Form.Item
                      name="p_city"
                      initialValue={''}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol"
                      )}
                    >
                      <Input placeholder="City " onChange={() => { form.submit(); }} />
                    </Form.Item>
                    <Select value={(pState ? pState : '')} className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol", styles.inputBusiness)} onChange={(e: any) => {
                      form.setFieldsValue({
                        ['p_state']: e
                      });
                      form.submit();
                    }}>
                      <Option value={''}>Select State</Option>
                      {(statesList as any).map((_s: any, index: any) => (
                        <Option key={index} value={_s.value}>{_s.label}</Option>
                      ))}
                    </Select>

                    <Form.Item
                      name="p_postcode"
                      // rules={[
                      //   {
                      //     required: true,
                      //     message: "Please Enter your Pincode!",
                      //   },
                      //   {
                      //     pattern: /^[1-9][0-9]{5}$/,
                      //     message: `Enter Valid Pincode`,
                      //   },
                      // ]}
                      initialValue={''}
                      className={cx(
                        "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol"
                      )}
                    >
                      <Input placeholder="Postcode " onChange={() => { form.submit(); }} />
                    </Form.Item>
                  </div>
                </div>
                <div
                  className={cx(
                    "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol"
                  )}
                >
                  <div style={{ width: "100%" }}>

                    <Form.Item
                      name="ssss"
                      // label="Search in Google "
                      // className={cx(styles.googlemapDropDown)}
                    >

                      {/* <GooglePlacesAutocomplete
                        apiKey={APIKEY}
                        selectProps={{
                          isClearable: true,
                          maxLength: 120,
                          onChange: (val: any) => {
                            handleSelect(val);
                            console.log("->latitude: ", 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>

                    {/* {mapAddress != '' && <iframe
                      width="100%"
                      height="300"
                      scrolling="no"
                      src={`https://maps.google.com/maps?width=100%25&height=600&hl=en&q=${mapAddress}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
                    ></iframe>
                    }
                    {mapAddress == '' && <iframe
                      width="100%"
                      height="300"
                      scrolling="no"
                      src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=guntur&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
                    ></iframe>
                    } */}
                  </div>
                </div>
              </div>
            </Form>

          </div>

          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-6 gutterCol"
            )}
          >
            {/* <div className={styles.rightCardContainer}>
              <div className={cx("mt-4 mb-2", styles.cardTitleMain)}>
                <InfoCircleOutlined style={{ color: "#291C61" }} />
                <h2 className={styles.cardTitle}>WhatsApp Number</h2>
              </div>
              <div className={cx("mt-2 mb-2")}>
                <Text className={styles.cardContent}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  eiusmod tempor incididunt ut labore et dolore magna aliqu.
                </Text>
              </div>
              <div className={cx("mt-4 mb-2", styles.cardTitleMain)}>
                <InfoCircleOutlined style={{ color: "#291C61" }} />
                <h2 className={styles.cardTitle}>WhatsApp Number</h2>
              </div>
              <Text className={cx(styles.cardContent)}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore.
              </Text>
              <div className={cx("mt-4 mb-2", styles.cardTitleMain)}>
                <InfoCircleOutlined style={{ color: "#291C61" }} />
                <h2 className={styles.cardTitle}>Social Handles</h2>
              </div>
              <Text className={cx(styles.cardContent)}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore.
              </Text>
            </div> */}
          </div>
        </div>
      }
    </>
  );
};
export default PersonalDetails;