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 { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
const Referensi = ({ chekValid, buttonSubmitClick }) => {
  const { control, watch } = useForm();
  const {
    formKontakPerson,
    errorsKontakPerson,
    validateKontakPerson,
    updateFormKontakPerson,
  } = usePengajuanTempoStoreKontakPerson();

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    updateFormKontakPerson(name, value);
    validateKontakPerson();
  };

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

  const direkturNameRef = useRef(null);
  const direkturMobileRef = 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 (errorsKontakPerson.direkturName && direkturNameRef.current) {
          direkturNameRef.current.scrollIntoView(options);
          return;
        }
        if (errorsKontakPerson.direkturMobile && direkturMobileRef.current) {
          direkturMobileRef.current.scrollIntoView(options);
          return;
        }
        if (errorsKontakPerson.direkturEmail && direkturEmailRef.current) {
          direkturEmailRef.current.scrollIntoView(options);
          return;
        }
        if (errorsKontakPerson.purchasingName && purchasingNameRef.current) {
          purchasingNameRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsKontakPerson.purchasingMobile &&
          purchasingMobileRef.current
        ) {
          purchasingMobileRef.current.scrollIntoView(options);
          return;
        }
        if (errorsKontakPerson.purchasingEmail && purchasingEmailRef.current) {
          purchasingEmailRef.current.scrollIntoView(options);
          return;
        }
        if (errorsKontakPerson.financeName && financeNameRef.current) {
          financeNameRef.current.scrollIntoView(options);
          return;
        }
        if (errorsKontakPerson.financeMobile && financeMobileRef.current) {
          financeMobileRef.current.scrollIntoView(options);
          return;
        }
        if (errorsKontakPerson.financeEmail && financeEmailRef.current) {
          financeEmailRef.current.scrollIntoView(options);
          return;
        }
      }
    };
    loadIndustries();
  }, [buttonSubmitClick, chekValid]);

  useEffect(() => {
    validateKontakPerson();
  }, [buttonSubmitClick]);
  return (
    <>
      <div className='flex justify-start'>
        <h1 className='font-bold'>
          Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
          <span className=' opacity-60'>(Opsional)</span>
        </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 Lengkap Direktur
              </label>
            </div>
            <div className='w-3/5'>
              <input
                value={formKontakPerson.direkturName}
                id='direkturName'
                name='direkturName'
                placeholder='Masukkan nama direktur anda'
                type='text'
                className='form-input'
                aria-invalid={errorsKontakPerson.direkturName}
                ref={direkturNameRef}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsKontakPerson.direkturName}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                No. Telpon Direktur
              </label>
              <span className='text-xs opacity-60'>
                isi nomor telpon direktur di perusahaan kamu
              </span>
            </div>
            <div className='w-3/5'>
              <input
                id='direkturMobile'
                name='direkturMobile'
                ref={direkturMobileRef}
                placeholder='Masukkan nomor direktur anda'
                type='tel'
                value={formKontakPerson.direkturMobile}
                className='form-input'
                aria-invalid={errorsKontakPerson.direkturMobile}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsKontakPerson.direkturMobile}
                </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={formKontakPerson.direkturEmail}
                className='form-input'
                aria-invalid={errorsKontakPerson.direkturEmail}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsKontakPerson.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={formKontakPerson.purchasingName}
                type='text'
                className='form-input'
                aria-invalid={errorsKontakPerson.purchasingName}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsKontakPerson.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={formKontakPerson.purchasingMobile}
                type='tel'
                className='form-input'
                aria-invalid={errorsKontakPerson.purchasingMobile}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsKontakPerson.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={formKontakPerson.purchasingEmail}
                type='email'
                className='form-input'
                aria-invalid={errorsKontakPerson.purchasingEmail}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsKontakPerson.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={formKontakPerson.financeName}
                type='text'
                className='form-input'
                aria-invalid={errorsKontakPerson.financeName}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsKontakPerson.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={formKontakPerson.financeMobile}
                type='tel'
                className='form-input'
                aria-invalid={errorsKontakPerson.financeMobile}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsKontakPerson.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={formKontakPerson.financeEmail}
                className='form-input'
                aria-invalid={errorsKontakPerson.financeEmail}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsKontakPerson.financeEmail}
                </div>
              )}
            </div>
          </div>
        </div>
      </form>
    </>
  );
};

export default Referensi;
