import React, { useEffect, useMemo, useRef } from 'react';
import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import useDevice from '@/core/hooks/useDevice';
const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
  const {
    formKontakPerson,
    errorsKontakPerson,
    validateKontakPerson,
    updateFormKontakPerson,
  } = usePengajuanTempoStoreKontakPerson();
  const { isDesktop, isMobile } = useDevice();
  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 (
    <>
      {isDesktop && (
        <div className=''>
          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
            Kontak Person
          </h1>
          <form className='flex flex-col w-full '>
            <div className='w-full grid grid-row-2 gap-5'>
              <div className='flex flex-row justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label text-nowrap'>
                    Nama Lengkap Direktur
                  </label>
                </div>
                <div className='w-3/5'>
                  <div className='flex items-center border border-gray-300 rounded-md'>
                    {/* Dropdown untuk memilih "Bpk" atau "Ibu" */}
                    <select
                      value={formKontakPerson.direkturTittle || ''}
                      id='direkturTittle'
                      name='direkturTittle'
                      className=' p-2   rounded-l-md'
                      onChange={handleInputChange}
                    >
                      <option value='' disabled>
                        Pilih
                      </option>
                      <option value='Bpk'>Bpk</option>
                      <option value='Ibu'>Ibu</option>
                    </select>

                    {/* Input untuk nama */}
                    <input
                      value={formKontakPerson.direkturName}
                      id='direkturName'
                      name='direkturName'
                      placeholder='Masukkan nama direktur anda'
                      type='text'
                      className='form-input border-l  border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
                      aria-invalid={errorsKontakPerson.direkturName}
                      ref={direkturNameRef}
                      onChange={handleInputChange}
                    />
                  </div>
                  {chekValid && (
                    <>
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsKontakPerson.direkturName}{' '}
                        {errorsKontakPerson.direkturTittle}
                      </div>
                    </>
                  )}
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label text-wrap'>
                    No. HP Direktur{' '}
                    <span className=' opacity-60'>(Opsional)</span>
                  </label>
                </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 className='w-2/5'>
                  <label className='form-label  text-nowrap'>
                    Email Direktur
                  </label>
                </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 className='w-2/5'>
                  <label className='form-label text-nowrap'>
                    Nama Purchasing
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      isi nama purchasing yang bertanggung jawab di perusahaan
                      anda
                    </span>
                  )}
                </div>
                <div className='w-3/5'>
                  <div className='flex items-center border border-gray-300 rounded-md'>
                    <select
                      value={formKontakPerson.purchasingTittle || ''}
                      id='purchasingTittle'
                      name='purchasingTittle'
                      className=' p-2   rounded-l-md'
                      onChange={handleInputChange}
                    >
                      <option value='' disabled>
                        Pilih
                      </option>
                      <option value='Bpk'>Bpk</option>
                      <option value='Ibu'>Ibu</option>
                    </select>
                    <input
                      id='purchasingName'
                      name='purchasingName'
                      ref={purchasingNameRef}
                      placeholder='Masukkan nama purchasing anda'
                      value={formKontakPerson.purchasingName}
                      type='text'
                      className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
                      aria-invalid={errorsKontakPerson.purchasingName}
                      onChange={handleInputChange}
                    />
                  </div>
                  {chekValid && (
                    <>
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsKontakPerson.purchasingName}{' '}
                        {errorsKontakPerson.purchasingTittle}
                      </div>
                    </>
                  )}
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label  text-nowrap'>
                    No. HP Purchasing
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      isi nomor purchasing yang bertanggung jawab diperusahaan
                      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 className='w-2/5'>
                  <label className='form-label  text-nowrap'>
                    Email Purchasing
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      isi email purchasing yang bertanggung jawab perusahaan
                      anda
                    </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 className='w-2/5'>
                  <label className='form-label  text-nowrap'>
                    Nama Finance
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      isi nama finance yang bertanggung jawab di perusahaan anda
                    </span>
                  )}
                </div>
                <div className='w-3/5'>
                  <div className='flex items-center border border-gray-300 rounded-md'>
                    <select
                      value={formKontakPerson.financeTittle || ''}
                      id='financeTittle'
                      name='financeTittle'
                      className=' p-2   rounded-l-md'
                      onChange={handleInputChange}
                    >
                      <option value='' disabled>
                        Pilih
                      </option>
                      <option value='Bpk'>Bpk</option>
                      <option value='Ibu'>Ibu</option>
                    </select>
                    <input
                      id='financeName'
                      name='financeName'
                      ref={financeNameRef}
                      placeholder='Masukkan nama finance'
                      value={formKontakPerson.financeName}
                      type='text'
                      className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
                      aria-invalid={errorsKontakPerson.financeName}
                      onChange={handleInputChange}
                    />
                  </div>
                  {chekValid && (
                    <>
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsKontakPerson.financeName}{' '}
                        {errorsKontakPerson.financeTittle}
                      </div>
                    </>
                  )}
                </div>
              </div>
              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label   text-nowrap'>
                    No. HP Finance
                  </label>
                  {!isKonfirmasi && (
                    <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 className='w-2/5'>
                  <label className='form-label text-nowrap'>
                    Email Finance
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      isi email finance yang bertanggung jawab diperusahaan anda
                    </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>
        </div>
      )}
      {isMobile && (
        <div className='text-sm'>
          <h1
            className={`font-bold py-4 mt-8 ${
              isKonfirmasi ? 'hidden' : 'text-xl'
            }`}
          >
            Kontak Person
          </h1>
          <form className='flex flex-col w-full '>
            <div className='w-full grid grid-row-2 gap-4'>
              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label  text-nowrap'>
                  Nama Lengkap Direktur
                </label>
                <div className='flex items-center border border-gray-300 rounded-md w-full'>
                  <select
                    value={formKontakPerson.direkturTittle || ''}
                    id='direkturTittle'
                    name='direkturTittle'
                    className=' p-2   rounded-l-md'
                    onChange={handleInputChange}
                  >
                    <option value='' disabled>
                      Pilih
                    </option>
                    <option value='Bpk'>Bpk</option>
                    <option value='Ibu'>Ibu</option>
                  </select>
                  <input
                    value={formKontakPerson.direkturName}
                    id='direkturName'
                    name='direkturName'
                    placeholder='Masukkan nama direktur anda'
                    type='text'
                    className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
                    aria-invalid={errorsKontakPerson.direkturName}
                    ref={direkturNameRef}
                    onChange={handleInputChange}
                  />
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsKontakPerson.direkturName}{' '}
                    {errorsKontakPerson.direkturTittle}
                  </div>
                )}
              </div>

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label text-nowrap'>
                  No. HP Direktur{' '}
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
                <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 className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label  text-nowrap'>
                  Email Direktur
                </label>
                <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 className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label text-nowrap'>
                  Nama Purchasing
                </label>
                <div className='flex items-center border border-gray-300 rounded-md w-full'>
                  <select
                    value={formKontakPerson.purchasingTittle || ''}
                    id='purchasingTittle'
                    name='purchasingTittle'
                    className=' p-2   rounded-l-md'
                    onChange={handleInputChange}
                  >
                    <option value='' disabled>
                      Pilih
                    </option>
                    <option value='Bpk'>Bpk</option>
                    <option value='Ibu'>Ibu</option>
                  </select>
                  <input
                    id='purchasingName'
                    name='purchasingName'
                    ref={purchasingNameRef}
                    placeholder='Masukkan nama purchasing anda'
                    value={formKontakPerson.purchasingName}
                    type='text'
                    className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
                    aria-invalid={errorsKontakPerson.purchasingName}
                    onChange={handleInputChange}
                  />
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsKontakPerson.purchasingName}{' '}
                    {errorsKontakPerson.purchasingTittle}
                  </div>
                )}
              </div>

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label  text-nowrap'>
                  No. HP Purchasing
                </label>
                <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 className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label  text-nowrap'>
                  Email Purchasing
                </label>
                <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 className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label  text-nowrap'>Nama Finance</label>
                <div className='flex items-center border border-gray-300 rounded-md w-full'>
                  <select
                    value={formKontakPerson.financeTittle || ''}
                    id='financeTittle'
                    name='financeTittle'
                    className=' p-2   rounded-l-md'
                    onChange={handleInputChange}
                  >
                    <option value='' disabled>
                      Pilih
                    </option>
                    <option value='Bpk'>Bpk</option>
                    <option value='Ibu'>Ibu</option>
                  </select>
                  <input
                    id='financeName'
                    name='financeName'
                    ref={financeNameRef}
                    placeholder='Masukkan nama finance'
                    value={formKontakPerson.financeName}
                    type='text'
                    className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
                    aria-invalid={errorsKontakPerson.financeName}
                    onChange={handleInputChange}
                  />
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsKontakPerson.financeName}{' '}
                    {errorsKontakPerson.financeTittle}
                  </div>
                )}
              </div>
              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label   text-nowrap'>
                  No. HP Finance
                </label>
                <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 className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label text-nowrap'>Email Finance</label>
                <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>
          </form>
        </div>
      )}
    </>
  );
};

export default KontakPerusahaan;