import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Controller, set, useForm } from 'react-hook-form';
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import odooApi from '~/libs/odooApi';
import stateApi from '@/lib/address/api/stateApi.js';
import cityApi from '@/lib/address/api/cityApi';
import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
import { usePengajuanTempoStorePengiriman } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
  const { control, watch } = useForm();
  const {
    formPengiriman,
    errorsPengiriman,
    validatePengiriman,
    updateFormPengiriman,
  } = usePengajuanTempoStorePengiriman();
  const [states, setState] = useState([]);
  const [cities, setCities] = useState([]);
  const [sameAddress, setSameAddress] = useState(false);

  useEffect(() => {
    const loadState = async () => {
      let dataState = await stateApi();
      dataState = dataState.map((state) => ({
        value: state.id,
        label: state.name,
      }));
      setState(dataState);
    };
    loadState();
  }, []);

  const watchState = watch('state');
  useEffect(() => {
    updateFormPengiriman('city', '');
    if (watchState) {
      updateFormPengiriman('state', `${watchState}`);
      validate();
      const loadCities = async () => {
        let dataCities = await cityApi({ stateId: watchState });
        dataCities = dataCities.map((city) => ({
          value: city.id,
          label: city.name,
        }));
        setCities(dataCities);
      };
      loadCities();
    }
  }, [watchState]);

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    updateFormPengiriman(name, value);
    validatePengiriman();
  };

  const isFormValid = useMemo(
    () => Object.keys(errorsPengiriman).length === 0,
    [errorsPengiriman]
  );

  const PICNameRef = useRef(null);
  const streetPengirimanRef = useRef(null);
  const statePengirimanRef = useRef(null);
  const cityPengirimanRef = useRef(null);
  const zipRef = useRef(null);
  const invoicePicRef = useRef(null);

  const direkturEmailRef = useRef(null);
  const purchasingNameRef = useRef(null);
  const purchasingEmailRef = useRef(null);
  const purchasingMobileRef = useRef(null);
  const financeNameRef = useRef(null);
  const financeMobileRef = useRef(null);
  const financeEmailRef = useRef(null);

  useEffect(() => {
    const loadIndustries = async () => {
      if (!isFormValid) {
        const options = {
          behavior: 'smooth',
          block: 'center',
        };
        if (errorsPengiriman.PICName && PICNameRef.current) {
          PICNameRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.streetPengiriman && streetPengirimanRef.current) {
          streetPengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.statePengiriman && statePengirimanRef.current) {
          statePengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.cityPengiriman && cityPengirimanRef.current) {
          cityPengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.zip && zipRef.current) {
          zipRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.invoicePic && invoicePicRef.current) {
          invoicePicRef.current.scrollIntoView(options);
          return;
        }

        if (errorsPengiriman.direkturEmail && direkturEmailRef.current) {
          direkturEmailRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.purchasingName && purchasingNameRef.current) {
          purchasingNameRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.purchasingMobile && purchasingMobileRef.current) {
          purchasingMobileRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.purchasingEmail && purchasingEmailRef.current) {
          purchasingEmailRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.financeName && financeNameRef.current) {
          financeNameRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.financeMobile && financeMobileRef.current) {
          financeMobileRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.financeEmail && financeEmailRef.current) {
          financeEmailRef.current.scrollIntoView(options);
          return;
        }
      }
    };
    loadIndustries();
  }, [buttonSubmitClick, chekValid]);

  useEffect(() => {
    validatePengiriman();
  }, [buttonSubmitClick]);
  useEffect(() => {
    if (sameAddress) {
      updateFormPengiriman('streetPengiriman', formPengiriman.streetPengiriman);
      updateFormPengiriman('statePengiriman', formPengiriman.statePengiriman);
      updateFormPengiriman('cityPengiriman', formPengiriman.cityPengiriman);
      updateFormPengiriman('zip', formPengiriman.zip);
    }
  }, [sameAddress]);
  return (
    <>
      <div className='flex justify-start'>
        <h1 className='font-bold'>Pengiriman</h1>
      </div>
      <form className='flex mt-4 flex-col w-full '>
        <div className='w-full grid grid-row-2 gap-5'>
          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Nama PIC Penerimaan Barang
              </label>
            </div>
            <div className='w-3/5'>
              <input
                value={formPengiriman.PICName}
                id='PICName'
                name='PICName'
                placeholder='Masukkan nama pic pengiriman disini'
                type='text'
                className='form-input'
                aria-invalid={errorsPengiriman.PICName}
                ref={PICNameRef}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.PICName}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Alamat Pengiriman Barang
              </label>
              <span className='text-xs opacity-60'>
                pastikan alamat yang anda isi sesuai dengan alamat kirim barang
              </span>
            </div>
            <div className='w-3/5 flex gap-3 flex-col'>
              <div>
                <input
                  id='streetPengiriman'
                  name='streetPengiriman'
                  ref={streetPengirimanRef}
                  placeholder='Masukkan alamat lengkap pengiriman barang'
                  type='text'
                  value={formPengiriman.streetPengiriman}
                  className='form-input'
                  onChange={handleInputChange}
                />
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsPengiriman.streetPengiriman}
                  </div>
                )}
              </div>
              <div className='sub-alamat flex flex-row w-full gap-3'>
                <div className='w-2/5' ref={statePengirimanRef}>
                  <Controller
                    name='statePengiriman'
                    control={control}
                    render={(props) => (
                      <HookFormSelect
                        {...props}
                        options={states}
                        placeholder='Provinsi'
                      />
                    )}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.statePengiriman}
                    </div>
                  )}
                </div>
                <div className='w-1/3' ref={cityPengirimanRef}>
                  <Controller
                    name='cityPengiriman'
                    control={control}
                    render={(props) => (
                      <HookFormSelect
                        {...props}
                        options={cities}
                        disabled={!watchState}
                        placeholder='Kota'
                      />
                    )}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.cityPengiriman}
                    </div>
                  )}
                </div>
                <div className='w-1/3'>
                  <input
                    id='zip'
                    name='zip'
                    ref={zipRef}
                    placeholder='Kode Pos'
                    type='number'
                    value={formPengiriman.zip}
                    className='form-input'
                    onChange={handleInputChange}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.zip}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Nama PIC Penerimaan Invoice
              </label>
            </div>
            <div className='w-3/5'>
              <input
                value={formPengiriman.invoicePic}
                id='invoicePic'
                name='invoicePic'
                placeholder='Masukkan nama pic invoice disini'
                type='text'
                className='form-input'
                aria-invalid={errorsPengiriman.invoicePic}
                ref={invoicePicRef}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.invoicePic}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Alamat Pengiriman Invoice
              </label>
              <span className='text-xs opacity-60'>
                Pastikan alamat yang anda isi sesuai dengan alamat kirim invoice
              </span>
            </div>
            <div className='w-3/5 flex gap-3 flex-col'>
              <div>
                <Checkbox
                  colorScheme='red'
                  isChecked={sameAddress}
                  onChange={() => setSameAddress(!sameAddress)}
                >
                  Alamat invoice sama dengan alamat pengiriman
                </Checkbox>
              </div>
              {!sameAddress && (
                <>
                  <div>
                    <input
                      id='streetPengiriman'
                      name='streetPengiriman'
                      ref={streetPengirimanRef}
                      placeholder='Masukkan alamat lengkap pengiriman barang'
                      type='text'
                      value={formPengiriman.streetPengiriman}
                      className='form-input'
                      onChange={handleInputChange}
                    />
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsPengiriman.streetPengiriman}
                      </div>
                    )}
                  </div>
                  <div className='sub-alamat flex flex-row w-full gap-3'>
                    <div className='w-2/5' ref={statePengirimanRef}>
                      <Controller
                        name='statePengiriman'
                        control={control}
                        render={(props) => (
                          <HookFormSelect
                            {...props}
                            options={states}
                            placeholder='Provinsi'
                          />
                        )}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.statePengiriman}
                        </div>
                      )}
                    </div>
                    <div className='w-1/3' ref={cityPengirimanRef}>
                      <Controller
                        name='cityPengiriman'
                        control={control}
                        render={(props) => (
                          <HookFormSelect
                            {...props}
                            options={cities}
                            disabled={!watchState}
                            placeholder='Kota'
                          />
                        )}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.cityPengiriman}
                        </div>
                      )}
                    </div>
                    <div className='w-1/3'>
                      <input
                        id='zip'
                        name='zip'
                        ref={zipRef}
                        placeholder='Kode Pos'
                        type='number'
                        value={formPengiriman.zip}
                        className='form-input'
                        onChange={handleInputChange}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.zip}
                        </div>
                      )}
                    </div>
                  </div>
                </>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Email Direktur
              </label>
              <span className='text-xs opacity-60'>
                isi email Direktur yang sesuai
              </span>
            </div>
            <div className='w-3/5'>
              <input
                id='direkturEmail'
                name='direkturEmail'
                ref={direkturEmailRef}
                placeholder='contoh@email.com'
                type='email'
                value={formPengiriman.direkturEmail}
                className='form-input'
                aria-invalid={errorsPengiriman.direkturEmail}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.direkturEmail}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Nama Purchasing
              </label>
              <span className='text-xs opacity-60'>
                isi nama purchasing yang bertanggung jawab di perusahaan anda
              </span>
            </div>
            <div className='w-3/5'>
              <input
                id='purchasingName'
                name='purchasingName'
                ref={purchasingNameRef}
                placeholder='Masukkan nama purchasing anda'
                value={formPengiriman.purchasingName}
                type='text'
                className='form-input'
                aria-invalid={errorsPengiriman.purchasingName}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.purchasingName}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                No. Telpon Purchasing
              </label>
              <span className='text-xs opacity-60'>
                isi nomor purchasing yang bertanggung jawab di perusahaan anda
              </span>
            </div>
            <div className='w-3/5'>
              <input
                id='purchasingMobile'
                name='purchasingMobile'
                ref={financeMobileRef}
                placeholder='Masukkan nomor purchasing anda'
                value={formPengiriman.purchasingMobile}
                type='tel'
                className='form-input'
                aria-invalid={errorsPengiriman.purchasingMobile}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.purchasingMobile}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Email Purchasing
              </label>
              <span className='text-xs opacity-60'>
                isi email purchasing benar
              </span>
            </div>
            <div className='w-3/5'>
              <input
                id='purchasingEmail'
                name='purchasingEmail'
                ref={purchasingEmailRef}
                placeholder='contoh@email.com'
                value={formPengiriman.purchasingEmail}
                type='email'
                className='form-input'
                aria-invalid={errorsPengiriman.purchasingEmail}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.purchasingEmail}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Nama Finance
              </label>
              <span className='text-xs opacity-60'>
                isi nama finance yang bertanggung jawab di perusahaan anda
              </span>
            </div>
            <div className='w-3/5'>
              <input
                id='financeName'
                name='financeName'
                ref={financeNameRef}
                placeholder='Masukkan nama finance'
                value={formPengiriman.financeName}
                type='text'
                className='form-input'
                aria-invalid={errorsPengiriman.financeName}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.financeName}
                </div>
              )}
            </div>
          </div>
          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                No. Telpon Finance
              </label>
              <span className='text-xs opacity-60'>
                isi nomor finance yang bertanggung jawab di perusahaan anda
              </span>
            </div>
            <div className='w-3/5'>
              <input
                id='financeMobile'
                name='financeMobile'
                ref={financeMobileRef}
                placeholder='Masukkan nomor finance'
                value={formPengiriman.financeMobile}
                type='tel'
                className='form-input'
                aria-invalid={errorsPengiriman.financeMobile}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.financeMobile}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Email Finance
              </label>
              <span className='text-xs opacity-60'>
                isi email finance dengan benar
              </span>
            </div>
            <div className='w-3/5'>
              <input
                id='financeEmail'
                name='financeEmail'
                ref={financeEmailRef}
                placeholder='contoh@email.com'
                type='email'
                value={formPengiriman.financeEmail}
                className='form-input'
                aria-invalid={errorsPengiriman.financeEmail}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.financeEmail}
                </div>
              )}
            </div>
          </div>
        </div>
      </form>
    </>
  );
};

export default Pengiriman;