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 { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
  const { control, watch } = useForm();
  const { form, errors, validate, updateForm } = usePengajuanTempoStore();
  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(() => {
    updateForm('city', '');
    if (watchState) {
      updateForm('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 watchCity = watch('city');
  useEffect(() => {
    if (watchCity) {
      updateForm('city', `${watchCity}`);
      validate();
    }
  }, [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) {
      updateForm('industry_id', `${selectedIndustryType?.value}`);
      validate();
      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);
    updateForm('estimasi', formattedValue.replace(/^Rp\s*/, ''));
    validate();
  };
  const onChangeTempoDuration = (e) => {
    updateForm('tempoDuration', `${e}`);
    validate();
  };

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

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

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    updateForm(name, value);
    validate();
  };

  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(errors).length === 0, [errors]);

  const nameRef = useRef(null);
  const industry_idRef = useRef(null);
  const streetRef = useRef(null);
  const stateRef = useRef(null);
  const cityRef = useRef(null);
  const zipRef = useRef(null);
  const mobileRef = useRef(null);
  const bankNameRef = useRef(null);
  const accountNameRef = useRef(null);
  const accountNumberRef = useRef(null);
  const estimasiRef = useRef(null);
  const tempoDurationRef = useRef(null);
  const bersediaRef = useRef(null);
  const categoryProdukRef = useRef(null);
  const tempoLimitRef = useRef(null);
  useEffect(() => {
    const loadIndustries = async () => {
      if (!isFormValid) {
        const options = {
          behavior: 'smooth',
          block: 'center',
        };
        if (errors.name && nameRef.current) {
          nameRef.current.scrollIntoView(options);
          return;
        }
        if (errors.industry_id && industry_idRef.current) {
          industry_idRef.current.scrollIntoView(options);
          return;
        }
        if (errors.street && streetRef.current) {
          streetRef.current.scrollIntoView(options);
          return;
        }
        if (errors.state && stateRef.current) {
          stateRef.current.scrollIntoView(options);
          return;
        }
        if (errors.city && cityRef.current) {
          cityRef.current.scrollIntoView(options);
          return;
        }
        if (errors.zip && zipRef.current) {
          zipRef.current.scrollIntoView(options);
          return;
        }
        if (errors.mobile && mobileRef.current) {
          mobileRef.current.scrollIntoView(options);
          return;
        }
        if (errors.bankName && bankNameRef.current) {
          bankNameRef.current.scrollIntoView(options);
          return;
        }
        if (errors.accountName && accountNameRef.current) {
          accountNameRef.current.scrollIntoView(options);
          return;
        }
        if (errors.accountNumber && accountNumberRef.current) {
          accountNumberRef.current.scrollIntoView(options);
          return;
        }
        if (errors.estimasi && estimasiRef.current) {
          estimasiRef.current.scrollIntoView(options);
          return;
        }
        if (errors.tempoDuration && tempoDurationRef.current) {
          tempoDurationRef.current.scrollIntoView(options);
          return;
        }
        if (errors.bersedia && bersediaRef.current) {
          bersediaRef.current.scrollIntoView(options);
          return;
        }
        if (errors.categoryProduk && categoryProdukRef.current) {
          categoryProdukRef.current.scrollIntoView(options);
          return;
        }
        if (errors.tempoLimit && tempoLimitRef.current) {
          tempoLimitRef.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='name'
                name='name'
                placeholder='Masukkan nama perusahaan'
                type='text'
                className='form-input'
                aria-invalid={errors.name}
                ref={nameRef}
                onChange={handleInputChange}
              />
              <span className='text-xs opacity-60'>
                Format: PT. INDOTEKNIK DOTCOM GEMILANG
              </span>
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.name}
                </div>
              )}
            </div>
          </div>
          <div className='flex flex-row  justify-between items-start'>
            <div ref={industry_idRef}>
              <label className='form-label w-2/5 text-nowrap'>Industri</label>
              <span className='text-xs opacity-60'>
                isi detail perusahaan sesuai dengan nama yang terdaftar
              </span>
            </div>
            <div className='w-3/5'>
              <Controller
                name='industry_id'
                control={control}
                render={(props) => (
                  <HookFormSelect
                    {...props}
                    options={industries}
                    placeholder={'Pilih industri bisnis anda'}
                  />
                )}
              />
              {selectedCategory && (
                <span className='text-gray_r-11 text-xs opacity-60'>
                  Kategori : {selectedCategory}
                </span>
              )}
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.industry_id}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Alamat Perusahaan
              </label>
              <span className='text-xs opacity-60'>
                alamat sesuai dengan alamat kantor pusat
              </span>
            </div>
            <div className='w-3/5 flex gap-3 flex-col'>
              <div>
                <input
                  id='street'
                  name='street'
                  ref={streetRef}
                  placeholder='Masukkan alamat lengkap perusahaan'
                  type='text'
                  className='form-input'
                  onChange={handleInputChange}
                />
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.street}
                  </div>
                )}
              </div>
              <div className='sub-alamat flex flex-row w-full gap-3'>
                <div className='w-2/5' ref={stateRef}>
                  <Controller
                    name='state'
                    control={control}
                    render={(props) => (
                      <HookFormSelect
                        {...props}
                        options={states}
                        placeholder='Provinsi'
                      />
                    )}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.state}
                    </div>
                  )}
                </div>
                <div className='w-1/3' ref={cityRef}>
                  <Controller
                    name='city'
                    control={control}
                    render={(props) => (
                      <HookFormSelect
                        {...props}
                        options={cities}
                        disabled={!watchState}
                        placeholder='Kota'
                      />
                    )}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.city}
                    </div>
                  )}
                </div>
                <div className='w-1/3'>
                  <input
                    id='zip'
                    name='zip'
                    ref={zipRef}
                    placeholder='Kode Pos'
                    type='number'
                    className='form-input'
                    onChange={handleInputChange}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.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'>
                No. Telfon Perusahaan
              </label>
              <span className='text-xs opacity-60'>
                isi no telfon perusahaan yang sesuai
              </span>
            </div>
            <div className='w-3/5'>
              <input
                id='mobile'
                name='mobile'
                ref={mobileRef}
                placeholder='Masukkan nomor telfon perusahaan'
                type='text'
                className='form-input'
                aria-invalid={errors.mobile}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.mobile}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>Data Bank</label>
              <span className='text-xs opacity-60'>
                Isi detail data bank perusahaan anda
              </span>
            </div>
            <div className='w-3/5 flex gap-3 flex-row'>
              <div>
                <input
                  id='bankName'
                  name='bankName'
                  ref={bankNameRef}
                  placeholder='Nama bank'
                  type='text'
                  className='form-input'
                  onChange={handleInputChange}
                />
                <span className='text-xs opacity-60'>
                  Format: BCA, Mandiri, CIMB, BNI dll
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.bankName}
                  </div>
                )}
              </div>
              <div>
                <input
                  id='accountName'
                  name='accountName'
                  ref={accountNameRef}
                  placeholder='Nama Rekening'
                  type='text'
                  className='form-input'
                  onChange={handleInputChange}
                />
                <span className='text-xs opacity-60'>Format: John Doe</span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.accountName}
                  </div>
                )}
              </div>
              <div>
                <input
                  id='accountNumber'
                  name='accountNumber'
                  ref={accountNumberRef}
                  placeholder='Nomor Rekening Bank'
                  type='text'
                  className='form-input'
                  onChange={handleInputChange}
                />
                <span className='text-xs opacity-60'>Format: 01234567896</span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.accountNumber}
                  </div>
                )}
              </div>
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Website <span className=' opacity-60'>(Opsional)</span>
              </label>
            </div>
            <div className='w-3/5'>
              <input
                id='website'
                name='website'
                placeholder='www.indoteknik.com'
                type='text'
                className='form-input'
                onChange={handleInputChange}
              />
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Estimasi Pembelian pertahun
              </label>
            </div>
            <div className='w-3/5'>
              <div className='relative'>
                <input
                  id='estimasi'
                  name='estimasi'
                  ref={estimasiRef}
                  // {...register('estimasi', {
                  //   setValueAs: (value) => value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka
                  // })}
                  placeholder='Isi estimasi pembelian produk pertahun'
                  type='text'
                  className='form-input' // padding untuk memberi ruang untuk "RP"
                  value={formatRupiah(form.estimasi)}
                  onChange={handleChange} // Mengatur perubahan input
                />
              </div>
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.estimasi}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-center'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Durasi Tempo
              </label>
              <span className='text-xs opacity-60'>
                Pilih durasi tempo yang anda inginkan
              </span>
            </div>
            <div className='w-3/5 flex flex-row items-center'>
              <div className='w-1/5' ref={tempoDurationRef}>
                <RadioGroup
                  onChange={onChangeTempoDuration}
                  // value={selectedValue}
                >
                  <Stack direction='column' className=''>
                    <Radio colorScheme='red' value='7'>
                      7 Hari
                    </Radio>
                    <Radio colorScheme='red' value='14' className=''>
                      14 Hari
                    </Radio>
                    <Radio colorScheme='red' value='30' className=''>
                      30 Hari
                    </Radio>
                  </Stack>
                </RadioGroup>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.tempoDuration}
                  </div>
                )}
              </div>
              <div className='w-4/5 flex flex-row justify-between items-center '>
                <div>
                  <label className='form-label w-2/5 text-nowrap'>
                    Limit Tempo
                  </label>
                  <span className='text-xs opacity-60'>
                    Ajukan nilai limit yang anda mau
                  </span>
                </div>
                <div
                  className='flex flex-col justify-start items-start'
                  ref={tempoLimitRef}
                >
                  <RadioGroup
                    onChange={onChangeTempoLimit}
                    className='flex items-center justify-between '
                  >
                    <Stack direction='row' className=''>
                      {/* Kolom 1 */}
                      <Stack direction='column' spacing={2} className='mr-4'>
                        <Radio colorScheme='red' value='5.000.000'>
                          5.000.000
                        </Radio>
                        <Radio colorScheme='red' value='10.000.000'>
                          10.000.000
                        </Radio>
                        <Radio colorScheme='red' value='15.000.000'>
                          15.000.000
                        </Radio>
                        <Radio colorScheme='red' value='20.000.000'>
                          20.000.000
                        </Radio>
                      </Stack>

                      {/* Kolom 2 */}
                      <Stack direction='column' className='ml-8' spacing={2}>
                        <Radio colorScheme='red' value='25.000.000'>
                          25.000.000
                        </Radio>
                        <Radio colorScheme='red' value='30.000.000'>
                          30.000.000
                        </Radio>
                        <Radio colorScheme='red' value='35.000.000'>
                          35.000.000
                        </Radio>
                        <div className='flex flex-row'>
                          <Radio colorScheme='red' value='custom'></Radio>
                          <input
                            placeholder='Isi limit yang anda inginkan'
                            type='text'
                            className='border ml-2 p-1' // padding untuk memberi ruang untuk "RP"
                            value={formatRupiah(tempoLimitValue)} // Menampilkan nilai terformat
                            onChange={(e) => {
                              const value = e.target.value;
                              const formattedValue = formatRupiah(value);
                              updateForm('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form
                            }}
                          />
                        </div>
                      </Stack>
                    </Stack>
                  </RadioGroup>
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.tempoLimit}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

          <div className='text-red-500'>
            *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim
            Indoteknik.com
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Apakah bersedia transaksi via website?
              </label>
              <span className='text-xs opacity-60'>
                Pilih produk bisa lebih dari 1
              </span>
            </div>
            <div className='w-3/5 flex flex-col justify-start'>
              <div className='flex gap-x-4' ref={bersediaRef}>
                <Checkbox
                  borderColor='gray.600'
                  colorScheme='red'
                  isChecked={bersedia === true} // Checked when bersedia is true
                  onChange={() => handleCheckboxBersediaChange('bersedia')}
                  value={true}
                  size='md'
                >
                  Saya bersedia
                </Checkbox>
                <Checkbox
                  borderColor='gray.600'
                  colorScheme='red'
                  isChecked={bersedia === false} // Checked when bersedia is false
                  onChange={() => handleCheckboxBersediaChange('tidakBersedia')}
                  value={false}
                  size='md'
                >
                  Tidak bersedia
                </Checkbox>
              </div>
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.estimasi}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Kategori Produk yang Digunakan
              </label>
              <span className='text-xs opacity-60'>
                Pilih produk bisa lebih dari 1
              </span>
            </div>
            <div className='w-3/5 flex flex-col'>
              <div className='flex flex-row justify-between'>
                <div className='flex flex-col gap-2' ref={categoryProdukRef}>
                  {firstColumn.map((item) => (
                    <Checkbox
                      key={item.id}
                      onChange={() => handleCheckboxChange(item.id)}
                    >
                      {item.name}
                    </Checkbox>
                  ))}
                </div>
                <div className='flex flex-col gap-2'>
                  {secondColumn.map((item) => (
                    <Checkbox
                      key={item.id}
                      onChange={() => handleCheckboxChange(item.id)}
                    >
                      {item.name}
                    </Checkbox>
                  ))}
                </div>
              </div>
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.categoryProduk}
                </div>
              )}
            </div>
          </div>
        </div>
      </form>
    </>
  );
};

export default KontakPerusahaan;