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 { usePengajuanTempoStorePengiriman } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
  const { control, watch, setValue } = useForm();
  const {
    formPengiriman,
    errorsPengiriman,
    validatePengiriman,
    updateFormPengiriman,
  } = usePengajuanTempoStorePengiriman();
  const [states, setState] = useState([]);
  const [cities, setCities] = useState([]);
  const [sameAddress, setSameAddress] = useState(false);
  const [everyWeekday, setEveryWeekday] = useState(false);
  const [everyWeek, setEveryWeek] = useState(false);
  const [tukarInvoice, setTukarInvoice] = useState(false);
  const [everyWeekdayPembayaran, setEveryWeekdayPembayaran] = useState(false);
  const [everyWeekPembayaran, setEveryWeekPembayaran] = useState(false);
  const [tukarInvoicePembayaran, setTukarInvoicePembayaran] = useState(false);
  const [selectedIds, setSelectedIds] = useState(
    formPengiriman.dokumenPengiriman
      ? formPengiriman.dokumenPengiriman.split(',').map(Number)
      : []
  );
  const [selectedIdsDokumenInvoice, setSelectedIdsselectedIdsDokumenInvoice] =
    useState(
      formPengiriman.dokumenPengirimanInvoice
        ? formPengiriman.dokumenPengirimanInvoice.split(',').map(Number)
        : []
    );

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

    setSelectedIds(updatedSelected);

    // Jika checkbox 'Lainnya' dipilih, aktifkan input custom

    updateFormPengiriman('dokumenPengiriman', updatedSelected.join(','));
    validatePengiriman();
  };
  const handleCheckboxChangeDokumenPengirimanInvoice = (id) => {
    const updatedSelected = selectedIdsDokumenInvoice.includes(id)
      ? selectedIdsDokumenInvoice.filter((selectedId) => selectedId !== id)
      : [...selectedIdsDokumenInvoice, id];

    setSelectedIdsselectedIdsDokumenInvoice(updatedSelected);

    // Jika checkbox 'Lainnya' dipilih, aktifkan input custom

    updateFormPengiriman('dokumenPengirimanInvoice', updatedSelected.join(','));
    validatePengiriman();
  };

  useEffect(() => {
    if (formPengiriman.dokumenPengiriman) {
      setSelectedIds(formPengiriman.dokumenPengiriman.split(',').map(Number)); // Parse string menjadi array angka
    }
  }, [formPengiriman.dokumenPengiriman]);
  useEffect(() => {
    if (formPengiriman.dokumenPengirimanInvoice) {
      setSelectedIdsselectedIdsDokumenInvoice(
        formPengiriman.dokumenPengirimanInvoice.split(',').map(Number)
      ); // Parse string menjadi array angka
    }
  }, [formPengiriman.dokumenPengirimanInvoice]);

  // Fungsi untuk memeriksa apakah item sudah dipilih
  const isChecked = (id) => selectedIds.includes(id);
  const isCheckedInvoice = (id) => selectedIdsDokumenInvoice.includes(id);

  useEffect(() => {
    const loadState = async () => {
      let dataState = await stateApi();
      dataState = dataState.map((state) => ({
        value: state.id,
        label: state.name,
      }));
      setState(dataState);
    };
    loadState();
  }, []);

  const watchState = watch('statePengiriman');
  useEffect(() => {
    updateFormPengiriman('cityPengiriman', '');
    if (watchState) {
      updateFormPengiriman('statePengiriman', `${watchState}`);
      validatePengiriman();
      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('cityPengiriman');
  useEffect(() => {
    if (watchCity) {
      updateFormPengiriman('cityPengiriman', `${watchCity}`);
      validatePengiriman();
    }
  }, [watchCity]);
  const handleInputChange = (event) => {
    const { name, value } = event.target;
    updateFormPengiriman(name, value);
    validatePengiriman();
  };

  const handleEveryWeekday = () => {
    setEveryWeekday(!everyWeekday);
  };
  const handleEveryWeek = () => {
    setEveryWeek(!everyWeek);
  };
  const handleTukarInvoice = () => {
    setTukarInvoice(!tukarInvoice);
  };
  const handleEveryWeekdayPembayaran = () => {
    setEveryWeekdayPembayaran(!everyWeekdayPembayaran);
  };
  const handleEveryWeekPembayaran = () => {
    setEveryWeekPembayaran(!everyWeekPembayaran);
  };
  const handleTukarInvoicePembayaran = () => {
    setTukarInvoicePembayaran(!tukarInvoicePembayaran);
  };

  useEffect(() => {
    updateFormPengiriman('everyWeekday', everyWeekday);
    updateFormPengiriman('everyWeek', everyWeek);
    updateFormPengiriman('tukarInvoice', tukarInvoice);
    updateFormPengiriman('everyWeekdayPembayaran', everyWeekdayPembayaran);
    updateFormPengiriman('everyWeekPembayaran', everyWeekPembayaran);
    updateFormPengiriman('tukarInvoicePembayaran', tukarInvoicePembayaran);
    validatePengiriman();
  }, [
    everyWeekday,
    everyWeek,
    tukarInvoice,
    everyWeekdayPembayaran,
    everyWeekPembayaran,
    tukarInvoicePembayaran,
  ]);

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

  const PICNameRef = useRef(null);
  const streetPengirimanRef = useRef(null);
  const statePengirimanRef = useRef(null);
  const cityPengirimanRef = useRef(null);
  const zipRef = useRef(null);
  const invoicePicRef = useRef(null);
  const streetInvoiceRef = useRef(null);
  const stateInvoiceRef = useRef(null);
  const cityInvoiceRef = useRef(null);
  const everyWeekdayInputRef = useRef(null);
  const everyWeekInputRef = useRef(null);
  const dokumenPengirimanRef = useRef(null);
  const dokumenPengirimanInputRef = useRef(null);
  const dokumenPengirimanInvoiceRef = useRef(null);
  const dokumenPengirimanInvoiceInputRef = useRef(null);

  useEffect(() => {
    const loadIndustries = async () => {
      if (!isFormValid) {
        const options = {
          behavior: 'smooth',
          block: 'center',
        };
        if (errorsPengiriman.PICName && PICNameRef.current) {
          PICNameRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.streetPengiriman && streetPengirimanRef.current) {
          streetPengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.statePengiriman && statePengirimanRef.current) {
          statePengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.cityPengiriman && cityPengirimanRef.current) {
          cityPengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.zip && zipRef.current) {
          zipRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.invoicePic && invoicePicRef.current) {
          invoicePicRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.streetInvoice && streetInvoiceRef.current) {
          streetInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.stateInvoice && stateInvoiceRef.current) {
          stateInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.cityInvoice && cityInvoiceRef.current) {
          cityInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsPengiriman.everyWeekdayInput &&
          everyWeekdayInputRef.current
        ) {
          everyWeekdayInputRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.everyWeekInput && everyWeekInputRef.current) {
          everyWeekInputRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsPengiriman.dokumenPengiriman &&
          dokumenPengirimanRef.current
        ) {
          dokumenPengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsPengiriman.dokumenInvoice &&
          dokumenPengirimanInvoiceRef.current
        ) {
          dokumenPengirimanInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (
          selectedIds &&
          formPengiriman.dokumenPengirimanInput === '' &&
          dokumenPengirimanInputRef.current
        ) {
          dokumenPengirimanInputRef.current.scrollIntoView(options);
          return;
        }
        if (
          selectedIdsDokumenInvoice &&
          formPengiriman.dokumenPengirimanInvoiceInput === '' &&
          dokumenPengirimanInvoiceInputRef.current
        ) {
          dokumenPengirimanInvoiceInputRef.current.scrollIntoView(options);
          return;
        }
      }
    };
    loadIndustries();
  }, [buttonSubmitClick, chekValid]);

  useEffect(() => {
    validatePengiriman();
    if (formPengiriman.isSameAddrees) {
      const isSame = formPengiriman.isSameAddrees;
      if (isSame == 'true') {
        setSameAddress(true);
      } else {
        setSameAddress(false);
      }
    }
  }, [buttonSubmitClick]);
  useEffect(() => {
    if (formPengiriman.isSameAddrees) {
      const isSame = formPengiriman.isSameAddrees;
      if (isSame == 'true') {
        setSameAddress(true);
      } else {
        setSameAddress(false);
      }
    }
  }, [formPengiriman.isSameAddrees]);
  useEffect(() => {
    if (sameAddress) {
      updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
      updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
      updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
    }
    updateFormPengiriman('isSameAddrees', `${sameAddress}`);
  }, [sameAddress]);

  const getFromLocalStorage = (key) => {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;

    const item = JSON.parse(itemStr);
    return item;
  };

  const cachedData = getFromLocalStorage('Pengiriman');
  useEffect(() => {
    if (cachedData) {
      setValue('cityPengiriman', parseInt(cachedData?.cityPengiriman));
      updateFormPengiriman('cityPengiriman', `${cachedData?.cityPengiriman}`);
    }
    if (cachedData?.statePengiriman) {
      setValue('statePengiriman', parseInt(cachedData?.statePengiriman));
    }
    if (cachedData?.stateInvoice) {
      setValue('stateInvoice', parseInt(cachedData?.stateInvoice));
    }
    if (cachedData?.cityInvoice) {
      setValue('cityInvoice', parseInt(cachedData?.cityInvoice));
    }
    if (cachedData?.isSameAddrees) {
      updateFormPengiriman('isSameAddrees', `${cachedData?.isSameAddrees}`);
    }
  }, [cachedData?.cityPengiriman]);
  useEffect(() => {
    if (cachedData?.everyWeek) {
      updateFormPengiriman('everyWeek', cachedData?.everyWeek);
      setEveryWeek(cachedData?.everyWeek);
    }
    if (cachedData?.everyWeekday) {
      updateFormPengiriman('everyWeekday', cachedData?.everyWeekday);
      setEveryWeekday(cachedData?.everyWeekday);
    }
    if (cachedData?.tukarInvoice) {
      updateFormPengiriman('tukarInvoice', cachedData?.tukarInvoice);
      setTukarInvoice(cachedData?.tukarInvoice);
    }
    if (cachedData?.everyWeekPembayaran) {
      updateFormPengiriman(
        'everyWeekPembayaran',
        cachedData?.everyWeekPembayaran
      );
      setEveryWeekPembayaran(cachedData?.everyWeekPembayaran);
    }
    if (cachedData?.everyWeekdayPembayaran) {
      updateFormPengiriman(
        'everyWeekdayPembayaran',
        cachedData?.everyWeekdayPembayaran
      );
      setEveryWeekdayPembayaran(cachedData?.everyWeekdayPembayaran);
    }
    if (cachedData?.tukarInvoicePembayaran) {
      updateFormPengiriman(
        'tukarInvoicePembayaran',
        cachedData?.tukarInvoicePembayaran
      );
      setTukarInvoicePembayaran(cachedData?.tukarInvoicePembayaran);
    }
  }, [
    cachedData?.everyWeek,
    cachedData?.everyWeekday,
    cachedData?.tukarInvoice,
    cachedData?.everyWeekdayPembayaran,
    cachedData?.everyWeekPembayaran,
    cachedData?.tukarInvoicePembayaran,
  ]);
  const handleChangeSameAddress = () => {
    setSameAddress(!sameAddress);
  };
  return (
    <>
      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
        Pengiriman
      </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 PIC Penerimaan Barang
              </label>
            </div>
            <div className='w-3/5'>
              <input
                value={formPengiriman.PICName}
                id='PICName'
                name='PICName'
                placeholder='Masukkan nama pic pengiriman disini'
                type='text'
                className='form-input'
                aria-invalid={errorsPengiriman.PICName}
                ref={PICNameRef}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.PICName}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div className='w-2/5'>
              <label className='form-label   text-nowrap'>
                Alamat Pengiriman Barang
              </label>
              {!isKonfirmasi && (
                <span className='text-xs opacity-60'>
                  pastikan alamat yang anda isi sesuai dengan alamat kirim
                  barang
                </span>
              )}
            </div>
            <div className='w-3/5 flex gap-3 flex-col'>
              <div>
                <input
                  id='streetPengiriman'
                  name='streetPengiriman'
                  ref={streetPengirimanRef}
                  placeholder='Masukkan alamat lengkap pengiriman barang'
                  type='text'
                  value={formPengiriman.streetPengiriman}
                  className='form-input'
                  onChange={handleInputChange}
                />
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsPengiriman.streetPengiriman}
                  </div>
                )}
              </div>
              <div className='sub-alamat flex flex-row w-full gap-3'>
                <div className='w-2/5' ref={statePengirimanRef}>
                  <Controller
                    name='statePengiriman'
                    control={control}
                    render={(props) => (
                      <HookFormSelect
                        {...props}
                        options={states}
                        placeholder='Provinsi'
                      />
                    )}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.statePengiriman}
                    </div>
                  )}
                </div>
                <div className='w-1/3' ref={cityPengirimanRef}>
                  <Controller
                    name='cityPengiriman'
                    control={control}
                    render={(props) => (
                      <HookFormSelect
                        {...props}
                        options={cities}
                        disabled={!watchState}
                        placeholder='Kota'
                      />
                    )}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.cityPengiriman}
                    </div>
                  )}
                </div>
                <div className='w-1/3'>
                  <input
                    id='zipPengiriman'
                    name='zipPengiriman'
                    ref={zipRef}
                    placeholder='Kode Pos'
                    type='number'
                    value={formPengiriman.zipPengiriman}
                    className='form-input'
                    onChange={handleInputChange}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.zipPengiriman}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div className='w-2/5'>
              <label className='form-label  text-nowrap'>
                Nama PIC Penerimaan Invoice
              </label>
            </div>
            <div className='w-3/5'>
              <input
                value={formPengiriman.invoicePic}
                id='invoicePic'
                name='invoicePic'
                placeholder='Masukkan nama pic invoice disini'
                type='text'
                className='form-input'
                aria-invalid={errorsPengiriman.invoicePic}
                ref={invoicePicRef}
                onChange={handleInputChange}
              />
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.invoicePic}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div className='w-2/5'>
              <label className='form-label text-nowrap'>
                Alamat Pengiriman Invoice
              </label>
              {!isKonfirmasi && (
                <span className='text-xs opacity-60'>
                  Pastikan alamat yang anda isi sesuai dengan alamat kirim
                  invoice
                </span>
              )}
            </div>
            <div className='w-3/5 flex gap-3 flex-col'>
              <div>
                <Checkbox
                  colorScheme='red'
                  isChecked={sameAddress}
                  onChange={handleChangeSameAddress}
                >
                  Alamat invoice sama dengan alamat pengiriman
                </Checkbox>
              </div>
              {!sameAddress && (
                <>
                  <div>
                    <input
                      id='streetInvoice'
                      name='streetInvoice'
                      ref={streetInvoiceRef}
                      placeholder='Masukkan alamat lengkap pengiriman invoice'
                      type='text'
                      value={formPengiriman.streetInvoice}
                      className='form-input'
                      onChange={handleInputChange}
                    />
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsPengiriman.streetInvoice}
                      </div>
                    )}
                  </div>
                  <div className='sub-alamat flex flex-row w-full gap-3'>
                    <div className='w-3/5' ref={stateInvoiceRef}>
                      <Controller
                        name='stateInvoice'
                        control={control}
                        render={(props) => (
                          <HookFormSelect
                            {...props}
                            options={states}
                            placeholder='Provinsi'
                          />
                        )}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.stateInvoice}
                        </div>
                      )}
                    </div>
                    <div className='w-2/5' ref={cityInvoiceRef}>
                      <Controller
                        name='cityInvoice'
                        control={control}
                        render={(props) => (
                          <HookFormSelect
                            {...props}
                            options={cities}
                            disabled={!watchState}
                            placeholder='Kota'
                          />
                        )}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.cityInvoice}
                        </div>
                      )}
                    </div>
                  </div>
                </>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div className='w-2/5'>
              <label className='form-label   text-wrap'>
                Jadwal Penukaran Invoice{' '}
                <span className=' opacity-60'>(Opsional)</span>
              </label>
              {!isKonfirmasi && (
                <span className='text-xs opacity-60'>
                  Pilih jika bisnis anda memiliki jadwal penukaran invoice
                </span>
              )}
            </div>
            <div className='w-3/5 flex gap-3 flex-col'>
              <div className='flex gap-3 flex-col'>
                <Checkbox
                  colorScheme='red'
                  isChecked={everyWeekday}
                  onChange={handleEveryWeekday}
                >
                  Setiap Minggu dihari
                </Checkbox>
                <input
                  id='everyWeekdayInput'
                  name='everyWeekdayInput'
                  ref={everyWeekdayInputRef}
                  placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
                  type='text'
                  value={formPengiriman.everyWeekdayInput}
                  className='form-input'
                  onChange={handleInputChange}
                />
              </div>
              <div className='flex gap-3 flex-col'>
                <Checkbox
                  colorScheme='red'
                  isChecked={everyWeek}
                  onChange={handleEveryWeek}
                >
                  Setiap Bulan di minggu ke
                </Checkbox>
                <input
                  id='everyWeekInput'
                  name='everyWeekInput'
                  ref={everyWeekInputRef}
                  placeholder='Format: Minggu 1 & Minggu 2'
                  type='text'
                  value={formPengiriman.everyWeekInput}
                  className='form-input'
                  onChange={handleInputChange}
                />
              </div>
              <div className='flex gap-3 flex-col'>
                <Checkbox
                  colorScheme='red'
                  isChecked={tukarInvoice}
                  onChange={handleTukarInvoice}
                >
                  Lainnya
                </Checkbox>
                <textarea
                  id='tukarInvoiceInput'
                  name='tukarInvoiceInput'
                  placeholder='isi manual dokumen yang anda mau'
                  type='textarea'
                  value={formPengiriman.tukarInvoiceInput}
                  className='form-input'
                  rows={4}
                  cols={40}
                  onChange={handleInputChange}
                />
              </div>
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div className='w-2/5'>
              <label className='form-label text-nowrap'>
                Jadwal Pembayaran{' '}
                <span className=' opacity-60'>(Opsional)</span>
              </label>
              {!isKonfirmasi && (
                <span className='text-xs opacity-60'>
                  Pilih jika bisnis anda memiliki jadwal pembayaran
                </span>
              )}
            </div>
            <div className='w-3/5 flex gap-3 flex-col'>
              <div className='flex gap-3 flex-col'>
                <Checkbox
                  colorScheme='red'
                  isChecked={everyWeekdayPembayaran}
                  onChange={handleEveryWeekdayPembayaran}
                >
                  Setiap Minggu dihari
                </Checkbox>
                <input
                  id='everyWeekdayInputPembayaran'
                  name='everyWeekdayInputPembayaran'
                  placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
                  type='text'
                  value={formPengiriman.everyWeekdayInputPembayaran}
                  className='form-input'
                  onChange={handleInputChange}
                />
              </div>
              <div className='flex gap-3 flex-col'>
                <Checkbox
                  colorScheme='red'
                  isChecked={everyWeekPembayaran}
                  onChange={handleEveryWeekPembayaran}
                >
                  Setiap Bulan di minggu ke
                </Checkbox>
                <input
                  id='everyWeekInputPembayaran'
                  name='everyWeekInputPembayaran'
                  placeholder='Format: Minggu 1 & Minggu 2'
                  type='text'
                  value={formPengiriman.everyWeekInputPembayaran}
                  className='form-input'
                  onChange={handleInputChange}
                />
              </div>
              <div className='flex gap-3 flex-col'>
                <Checkbox
                  colorScheme='red'
                  isChecked={tukarInvoicePembayaran}
                  onChange={handleTukarInvoicePembayaran}
                >
                  Lainnya
                </Checkbox>
                <textarea
                  id='tukarInvoiceInputPembayaran'
                  name='tukarInvoiceInputPembayaran'
                  placeholder='isi manual dokumen yang anda mau'
                  type='textarea'
                  value={formPengiriman.tukarInvoiceInputPembayaran}
                  className='form-input'
                  rows={4}
                  cols={40}
                  onChange={handleInputChange}
                />
              </div>
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div className='w-2/5'>
              <label className='form-label   text-wrap'>
                Dokumen saat Pengiriman Barang
              </label>
              {!isKonfirmasi && (
                <span className='text-xs opacity-60'>
                  Pilih dokumen lampiran saat pengiriman barang
                </span>
              )}
            </div>
            <div
              className='w-3/5 flex gap-3 flex-col'
              ref={dokumenPengirimanRef}
            >
              <Checkbox
                colorScheme='red'
                key='0'
                isChecked={isChecked(0)}
                onChange={() => handleCheckboxChange(0)}
              >
                Surat Tanda Terima Barang (STTB)
              </Checkbox>
              <Checkbox
                colorScheme='red'
                key='1'
                isChecked={isChecked(1)}
                onChange={() => handleCheckboxChange(1)}
              >
                Good Receipt (GR)
              </Checkbox>
              <Checkbox
                colorScheme='red'
                key='2'
                isChecked={isChecked(2)}
                onChange={() => handleCheckboxChange(2)}
              >
                Surat Terima Barang (STB)
              </Checkbox>
              <Checkbox
                colorScheme='red'
                key='3'
                isChecked={isChecked(3)}
                onChange={() => handleCheckboxChange(3)}
              >
                Lembar Penerimaan Barang (LPB)
              </Checkbox>

              <div className='flex gap-3 flex-col'>
                <Checkbox
                  colorScheme='red'
                  key='4'
                  isChecked={isChecked(4)}
                  onChange={() => handleCheckboxChange(4)}
                >
                  Lainnya
                </Checkbox>
                <textarea
                  id='dokumenPengirimanInput'
                  name='dokumenPengirimanInput'
                  placeholder='isi manual dokumen yang anda mau'
                  type='textarea'
                  ref={dokumenPengirimanInputRef}
                  value={formPengiriman.dokumenPengirimanInput}
                  className='form-input'
                  rows={4}
                  cols={40}
                  onChange={handleInputChange}
                />
              </div>
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.dokumenPengiriman}
                </div>
              )}
            </div>
          </div>

          <div className='flex flex-row  justify-between items-start'>
            <div className='w-2/5'>
              <label className='form-label  text-wrap'>
                Dokumen yang dilampirkan saat Pengiriman Invoice
              </label>
              <span className='text-xs opacity-60'>
                Dokumen akan dikirimkan sesuai dengan yang anda pilih
              </span>
            </div>
            <div
              className='w-3/5 flex gap-3 flex-col'
              ref={dokumenPengirimanInvoiceRef}
            >
              <Checkbox
                colorScheme='red'
                key='0'
                isChecked={isCheckedInvoice(0)}
                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(0)}
              >
                Invoice Pembelian
              </Checkbox>
              <Checkbox
                colorScheme='red'
                key='1'
                isChecked={isCheckedInvoice(1)}
                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(1)}
              >
                Surat Jalan
              </Checkbox>
              <Checkbox
                colorScheme='red'
                key='2'
                isChecked={isCheckedInvoice(2)}
                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(2)}
              >
                Berita Acara Serah Terima (BAST)
              </Checkbox>
              <Checkbox
                colorScheme='red'
                key='3'
                isChecked={isCheckedInvoice(3)}
                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(3)}
              >
                Faktur Pajak
              </Checkbox>
              <Checkbox
                colorScheme='red'
                key='4'
                isChecked={isCheckedInvoice(4)}
                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(4)}
              >
                Good Receipt (GR)
              </Checkbox>

              <div className='flex gap-3 flex-col'>
                <Checkbox
                  colorScheme='red'
                  key='5'
                  isChecked={isCheckedInvoice(5)}
                  onChange={() =>
                    handleCheckboxChangeDokumenPengirimanInvoice(5)
                  }
                >
                  Lainnya
                </Checkbox>
                <textarea
                  id='dokumenPengirimanInvoiceInput'
                  name='dokumenPengirimanInvoiceInput'
                  placeholder='isi manual dokumen yang anda mau'
                  type='textarea'
                  ref={dokumenPengirimanInvoiceInputRef}
                  value={formPengiriman.dokumenPengirimanInvoiceInput}
                  className='form-input'
                  rows={4}
                  cols={40}
                  onChange={handleInputChange}
                />
              </div>
              {chekValid && (
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errorsPengiriman.dokumenInvoicePengiriman}
                </div>
              )}
            </div>
          </div>
        </div>
      </form>
    </>
  );
};

export default Pengiriman;