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 informasiPerusahaan = ({
  chekValid,
  buttonSubmitClick,
  isKonfirmasi,
}) => {
  const { control, watch, setValue, getValues } = 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' },
  ];
  const radioOptions = [
    { label: '5.000.000', value: '5000000' },
    { label: '10.000.000', value: '10000000' },
    { label: '15.000.000', value: '15000000' },
    { label: '20.000.000', value: '20000000' },
    { label: '25.000.000', value: '25000000' },
    { label: '30.000.000', value: '30000000' },
    { label: '35.000.000', value: '35000000' },
  ];

  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);
    updateForm('estimasi', formattedValue.replace(/^Rp\s*/, ''));
    validate();
  };
  const onChangeTempoDuration = (e) => {
    updateForm('tempoDuration', `${e}`);
    validate();
  };

  const onChangeTempoLimit = (e) => {
    updateForm('tempoLimit', `${e}`);
    validate();
  };
  const [isCustom, setIsCustom] = React.useState(false);
  const [tempoLimitValueEx, setTempoLimitValueEx] = React.useState('');
  const handleCheckboxBersediaChange = (value) => {
    // if (value === 'bersedia') {
    //   setBersedia(true);
    // } else if (value === 'tidakBersedia') {
    //   setBersedia(false);
    // }
    // updateForm('bersedia', `${value === 'bersedia'}`);
    updateForm('bersedia', `${value}`);
    validate();
  };
  const [selectedIds, setSelectedIds] = useState(
    form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka
  );

  const handleCheckboxChange = (id) => {
    const updatedSelected = selectedIds.includes(id)
      ? selectedIds.filter((selectedId) => selectedId !== id)
      : [...selectedIds, id];

    setSelectedIds(updatedSelected);

    // Mengubah array kembali menjadi string yang dipisahkan oleh koma
    updateForm('categoryProduk', updatedSelected.join(','));
    validate();
  };

  useEffect(() => {
    if (form.categoryProduk) {
      setSelectedIds(form.categoryProduk.split(',').map(Number)); // Parse string menjadi array angka
    }
  }, [form.categoryProduk]);
  const isChecked = (id) => selectedIds.includes(id);

  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]);
  useEffect(() => {
    if (form.industry_id) {
      setValue('industry_id', parseInt(form.industry_id));
    }
    if (form.state) {
      setValue('state', parseInt(form.state));
    }
    if (form.city) {
      setValue('city', parseInt(form.city));
    }
    if (form.tempoDuration) {
      setValue('tempoDuration', form.tempoDuration);
    }
    if (form.tempoLimit) {
      setValue('tempoLimit', form.tempoLimit);
    }
    if (form.tempoLimit) {
      const isValueInOptions = radioOptions.some(
        (option) => option.value === form.tempoLimit
      );

      if (isValueInOptions) {
        setValue('tempoLimit', form.tempoLimit); // Set value dari radio options
        setIsCustom(false); // Pastikan custom tidak aktif
      } else {
        setValue('tempoLimit', 'custom'); // Set value ke custom jika tidak termasuk dalam options
        setIsCustom(true); // Aktifkan custom input
        setTempoLimitValueEx(form.tempoLimit); // Set nilai input custom ke form.tempoLimit
      }
    }
  }, [form]);
  return (
    <div className=''>
      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
        Informasi Perusahaan
      </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 Perusahaan</label>
              {!isKonfirmasi && (
                <span className='text-xs opacity-60'>
                  isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
                </span>
              )}
            </div>
            <div className='w-3/5'>
              <input
                id='name'
                name='name'
                placeholder='Masukkan nama perusahaan'
                type='text'
                className='form-input'
                aria-invalid={errors.name}
                value={form.name}
                ref={nameRef}
                onChange={handleInputChange}
              />
              {!isKonfirmasi && (
                <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 className='w-2/5' ref={industry_idRef}>
              <label className='form-label  text-nowrap'>Industri</label>
              {!isKonfirmasi && (
                <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'}
                  />
                )}
              />
              {!isKonfirmasi && 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>
              {!isKonfirmasi && (
                <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'
                  value={form.street}
                  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'
                    value={form.zip}
                    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>
              {!isKonfirmasi && (
                <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='tel'
                value={form.mobile}
                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>
              {!isKonfirmasi && (
                <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'
                  value={form.bankName}
                  className='form-input'
                  onChange={handleInputChange}
                />
                {!isKonfirmasi && (
                  <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'
                  value={form.accountName}
                  className='form-input'
                  onChange={handleInputChange}
                />
                {!isKonfirmasi && (
                  <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'
                  value={form.accountNumber}
                  className='form-input'
                  onChange={handleInputChange}
                />
                {!isKonfirmasi && (
                  <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'
                value={form.website}
                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 className='w-2/5'>
              <label className='form-label 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={form.tempoDuration}
                >
                  <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>
              {!isKonfirmasi && (
                <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={(value) => {
                        if (value === 'custom') {
                          setIsCustom(true);
                          updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
                        } else {
                          setIsCustom(false);
                          onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
                        }
                      }}
                      className='flex items-center justify-between'
                      value={isCustom ? 'custom' : form.tempoLimit}
                    >
                      <Stack direction='row'>
                        {/* Kolom 1 */}
                        <Stack direction='column' spacing={2} className='mr-4'>
                          {radioOptions.slice(0, 4).map((option) => (
                            <Radio
                              key={option.value}
                              colorScheme='red'
                              value={option.value}
                            >
                              {option.label}
                            </Radio>
                          ))}
                        </Stack>

                        {/* Kolom 2 */}
                        <Stack direction='column' className='ml-8' spacing={2}>
                          {radioOptions.slice(4).map((option) => (
                            <Radio
                              key={option.value}
                              colorScheme='red'
                              value={option.value}
                            >
                              {option.label}
                            </Radio>
                          ))}
                          <div className='flex flex-row items-center'>
                            <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(tempoLimitValueEx)} // Menampilkan nilai terformat
                              onChange={(e) => {
                                const value = e.target.value;
                                const formattedValue = formatRupiah(value);
                                setTempoLimitValueEx(formattedValue);
                                updateForm(
                                  'tempoLimit',
                                  formattedValue.replace(/^Rp\s*/, '')
                                ); // 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>
          {isKonfirmasi && (
            <div className='flex flex-row justify-between items-center'>
              <div className='w-2/5'>
                <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='w-3/5 flex flex-col justify-start items-start'
                ref={tempoLimitRef}
              >
                <RadioGroup
                  onChange={(value) => {
                    if (value === 'custom') {
                      setIsCustom(true);
                      updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
                    } else {
                      setIsCustom(false);
                      onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
                    }
                  }}
                  className='flex items-center justify-between'
                  value={isCustom ? 'custom' : form.tempoLimit}
                >
                  <Stack direction='row'>
                    {/* Kolom 1 */}
                    <Stack direction='column' spacing={2} className='mr-4'>
                      {radioOptions.slice(0, 4).map((option) => (
                        <Radio
                          key={option.value}
                          colorScheme='red'
                          value={option.value}
                        >
                          {option.label}
                        </Radio>
                      ))}
                    </Stack>

                    {/* Kolom 2 */}
                    <Stack direction='column' className='ml-8' spacing={2}>
                      {radioOptions.slice(4).map((option) => (
                        <Radio
                          key={option.value}
                          colorScheme='red'
                          value={option.value}
                        >
                          {option.label}
                        </Radio>
                      ))}
                      <div className='flex flex-row items-center'>
                        <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(tempoLimitValueEx)} // Menampilkan nilai terformat
                          onChange={(e) => {
                            const value = e.target.value;
                            const formattedValue = formatRupiah(value);
                            setTempoLimitValueEx(formattedValue);
                            updateForm(
                              'tempoLimit',
                              formattedValue.replace(/^Rp\s*/, '')
                            ); // 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 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 className='w-2/5'>
              <label className='form-label  text-wrap '>
                Apakah bersedia transaksi via website?
              </label>
              {!isKonfirmasi && (
                <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}>
                <RadioGroup
                  onChange={handleCheckboxBersediaChange}
                  value={form.bersedia}
                >
                  <Stack direction='row'>
                    <Radio colorScheme='red' value='bersedia'>
                      Saya bersedia
                    </Radio>
                    <Radio colorScheme='red' value='tidakBersedia'>
                      Tidak bersedia
                    </Radio>
                  </Stack>
                </RadioGroup>
                {/* <Checkbox
                  name='bersedia'
                  borderColor='gray.600'
                  colorScheme='red'
                  isChecked={bersedia === true} // Checked when bersedia is true
                  onChange={() => handleCheckboxBersediaChange('bersedia')}
                  value={true}
                  size='md'
                >
                  Saya bersedia
                </Checkbox>
                <Checkbox
                  name='bersedia'
                  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 ${
              isKonfirmasi ? 'items-center' : 'items-start'
            }`}
          >
            <div>
              <label className='form-label w-2/5 text-nowrap'>
                Kategori Produk yang Digunakan
              </label>
              {!isKonfirmasi && (
                <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
                      colorScheme='red'
                      key={item.id}
                      onChange={() => handleCheckboxChange(item.id)}
                      isChecked={isChecked(item.id)}
                    >
                      {item.name}
                    </Checkbox>
                  ))}
                </div>
                <div className='flex flex-col gap-2'>
                  {secondColumn.map((item) => (
                    <Checkbox
                      colorScheme='red'
                      key={item.id}
                      isChecked={isChecked(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>
    </div>
  );
};

export default informasiPerusahaan;