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 KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
  const { control, watch } = useForm();
  const {
    formKontakPerson,
    errorsKontakPerson,
    validateKontakPerson,
    updateFormKontakPerson,
  } = usePengajuanTempoStoreKontakPerson();
  const [industries, setIndustries] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState('');
  const [states, setState] = useState([]);
  const [cities, setCities] = useState([]);
  const [bersedia, setBersedia] = useState(null);
  const category_produk = [
    { id: 1, name: 'Pengaman, Kesehatan & Keamanan' },
    { id: 2, name: 'Perkakas Tangan, Listrik & Pneumatic' },
    { id: 3, name: 'Mesin Industrial' },
    { id: 4, name: 'Mesin Pertanian & Perkebunan' },
    { id: 5, name: 'Mesin Pembersih & Janitorial' },
    { id: 6, name: 'Cairan Berbahan Kimia' },
    { id: 7, name: 'Perlengkapan Pengukuran & Pengujian' },
    { id: 8, name: 'Peralatan Listrik & Elektronik' },
    { id: 9, name: 'Perlengkapan Logistik & Gudang' },
    { id: 10, name: 'Peralatan Kantor & Stationery' },
    { id: 11, name: 'Komponen & Aksesoris' },
    { id: 12, name: 'Peralatan Horeca & Food Service' },
  ];

  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(() => {
    updateFormKontakPerson('city', '');
    if (watchState) {
      updateFormKontakPerson('state', `${watchState}`);
      validateKontakPerson();
      const loadCities = async () => {
        let dataCities = await cityApi({ stateId: watchState });
        dataCities = dataCities.map((city) => ({
          value: city.id,
          label: city.name,
        }));
        setCities(dataCities);
      };
      loadCities();
    }
  }, [watchState]);

  const watchCity = watch('city');
  useEffect(() => {
    if (watchCity) {
      updateFormKontakPerson('city', `${watchCity}`);
      validateKontakPerson();
    }
  }, [watchCity]);

  useEffect(() => {
    const loadIndustries = async () => {
      const dataIndustries = await odooApi('GET', '/api/v1/partner/industry');
      setIndustries(
        dataIndustries?.map((o) => ({
          value: o.id,
          label: o.name,
          category: o.category,
        }))
      );
    };
    loadIndustries();
  }, []);

  useEffect(() => {
    const selectedIndustryType = industries.find(
      (industry) => industry.value === watch('industry_id')
    );
    if (selectedIndustryType) {
      updateFormKontakPerson('industry_id', `${selectedIndustryType?.value}`);
      validateKontakPerson();
      setSelectedCategory(selectedIndustryType.category);
    }
  }, [watch('industry_id'), industries]);

  const estimasiValue = watch('estimasi');
  const tempoLimitValue = watch('tempoLimit');

  // Memformat angka menjadi format rupiah
  const formatRupiah = (value) => {
    if (!value) return '';
    const numberString = value.replace(/[^0-9]/g, ''); // Menghapus karakter non-digit
    return numberString
      ? 'Rp ' + new Intl.NumberFormat('id-ID').format(numberString)
      : '';
  };

  const handleChange = (e) => {
    const value = e.target.value;
    const formattedValue = formatRupiah(value);
    console.log('formattedValue', formattedValue);
    updateFormKontakPerson('estimasi', formattedValue.replace(/^Rp\s*/, ''));
    validateKontakPerson();
  };
  const onChangeTempoDuration = (e) => {
    updateFormKontakPerson('tempoDuration', `${e}`);
    validateKontakPerson();
  };

  const onChangeTempoLimit = (e) => {
    updateFormKontakPerson('tempoLimit', `${e}`);
    validateKontakPerson();
  };
  const handleCheckboxBersediaChange = (value) => {
    if (value === 'bersedia') {
      setBersedia(true);
    } else if (value === 'tidakBersedia') {
      setBersedia(false);
    }
    updateFormKontakPerson('bersedia', `${value === 'bersedia'}`);
    validateKontakPerson();
  };
  const [selectedIds, setSelectedIds] = useState([]);

  const handleCheckboxChange = (id) => {
    setSelectedIds((prevSelected) =>
      prevSelected.includes(id)
        ? prevSelected.filter((selectedId) => selectedId !== id)
        : [...prevSelected, id]
    );
    updateFormKontakPerson('categoryProduk', `${selectedIds}`);
    validateKontakPerson();
  };

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

  const midIndex = Math.ceil(category_produk.length / 2);
  const firstColumn = category_produk.slice(0, midIndex);
  const secondColumn = category_produk.slice(midIndex);
  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 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.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]);
  return (
    <>
      <div className='flex justify-start'>
        <h1 className='font-bold'>Kontak Person</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
                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'
                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'
                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'
                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'>
                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'
                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'
                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'
                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'
                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 KontakPerusahaan;