import React, { useState, useEffect, useMemo, useRef } from 'react';
import { useForm } from 'react-hook-form';
import { usePengajuanTempoStoreSupplier } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { PlusCircleIcon } from '@heroicons/react/24/outline';
import useDevice from '@/core/hooks/useDevice';
import { Trash2Icon } from 'lucide-react';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
const initialData = [];
const Referensi = ({ chekValid, buttonSubmitClick }) => {
  const { isDesktop, isMobile } = useDevice();
  const [openIndexes, setOpenIndexes] = useState([]);

  const {
    register,
    formState: { errors },
    handleSubmit,
    watch,
    setValue,
    control,
  } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues,
  });
  const { formSupplier, updateFormSupplier, updateHasSave } =
    usePengajuanTempoStoreSupplier();
  const [formData, setFormData] = useState([
    {
      supplier: '',
      pic: '',
      telepon: '',
      durasiTempo: '',
      creditLimit: '',
    },
  ]);

  const [buttonSubmit, setButtonSubmit] = useState(false);
  const [supplierData, setSupplierData] = useState(initialData);
  const [newSupplier, setNewSupplier] = useState({
    supplier: '',
    pic: '',
    telepon: '',
    durasiTempo: '',
    creditLimit: '',
  });
  const onChangeInput = (e, index) => {
    const { name, value } = e.target;

    let formattedValue = value;

    if (name === 'durasiTempo') {
      formattedValue = value.replace(/\s*Hari\s*/g, '');
    } else if (name === 'creditLimit') {
      formattedValue = value.replace(/^Rp\s*/, '');
    }

    const editData = supplierData.map((item, i) =>
      i === index ? { ...item, [name]: formattedValue } : item
    );

    setSupplierData(editData);
    updateHasSave(false);
  };

  const handleNewSupplierChange = (e) => {
    const { name, value } = e.target;

    let formattedValue = value;

    if (name === 'durasiTempo') {
      formattedValue = value.replace(/\s*Hari\s*/g, '');
    } else if (name === 'creditLimit') {
      formattedValue = value.replace(/^Rp\s*/, '');
    }

    const updatedSupplier = { ...newSupplier, [name]: formattedValue };
    setNewSupplier(updatedSupplier);
    updateHasSave(false);
  };

  const handleAddNewSupplier = () => {
    if (Object.values(newSupplier).every((val) => val.trim() !== '')) {
      setSupplierData((prevData) => {
        const newData = [...prevData, newSupplier];
        return newData;
      });

      setNewSupplier({
        supplier: '',
        pic: '',
        telepon: '',
        durasiTempo: '',
        creditLimit: '',
      });
    }
    updateHasSave(false);
  };

  useEffect(() => {
    handleAddNewSupplier();
    updateFormSupplier(supplierData);
    setButtonSubmit(!buttonSubmit);
  }, [buttonSubmitClick]);
  const simpanData = () => {
    setButtonSubmit(!buttonSubmit);
    if (Object.values(newSupplier).every((val) => val.trim() !== '')) {
      setSupplierData((prevData) => {
        const newData = [...prevData, newSupplier];
        return newData;
      });

      setNewSupplier({
        supplier: '',
        pic: '',
        telepon: '',
        durasiTempo: '',
        creditLimit: '',
      });
    }
    updateHasSave(true);
  };
  const formatRupiah = (value) => {
    if (!value) return '';
    const numberString = value.replace(/[^0-9]/g, '');
    return numberString
      ? 'Rp ' + new Intl.NumberFormat('id-ID').format(numberString)
      : '';
  };
  const formatHari = (value) => {
    if (!value) return '';

    const numberString = value.replace(/[^0-9]/g, '');

    return numberString ? numberString.replace(/Hari/g, '') + ' Hari' : '';
  };

  useEffect(() => {
    updateFormSupplier(supplierData);
  }, [buttonSubmit]);
  const getFromLocalStorage = (key) => {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;

    const item = JSON.parse(itemStr);
    return item;
  };
  useEffect(() => {
    const cachedData = getFromLocalStorage('Referensi');
    if (cachedData) {
      setSupplierData(cachedData);
      updateFormSupplier(cachedData);
    }
  }, [buttonSubmitClick]);

  useEffect(() => {
    setOpenIndexes(supplierData.map((_, index) => index));
  }, [supplierData]);

  const toggleOpen = (index) => {
    setOpenIndexes((prev) =>
      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
    );
  };
  return (
    <>
      {isDesktop && (
        <div className='py-4'>
          <div className='flex flex-col justify-start'>
            <h1 className='font-bold text-2xl'>
              Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
              <span className=' opacity-60 text-xl'>(Opsional)</span>
            </h1>
            <p className='opacity-60'>
              Data yang anda berikan hanya untuk bahan referensi internal kami
              untuk memberikan anda credit limit dan durasi tempo
            </p>
          </div>
          <form className='flex mt-4 flex-col w-full '>
            <table className='border' border='1' cellPadding='10'>
              <thead>
                <tr className='border '>
                  <th className='text-left px-5 py-2'>
                    Nama Supplier / Rekanan
                  </th>
                  <th className='text-left px-5 py-2'>PIC</th>
                  <th className='text-left px-5 py-2'>Telepon</th>
                  <th className='text-left px-5 py-2'>Durasi Tempo</th>
                  <th className='text-left px-5 py-2'>Credit Limit</th>
                </tr>
              </thead>
              <tbody>
                {supplierData.map((supplier, index) => (
                  <tr key={index}>
                    <td>
                      <input
                        name='supplier'
                        value={supplier.supplier}
                        type='text'
                        onChange={(e) => onChangeInput(e, index)}
                        className='form-input border px-4 py-2'
                        placeholder='Type Supplier'
                      />
                    </td>
                    <td>
                      <input
                        name='pic'
                        value={supplier.pic}
                        type='text'
                        className='form-input border px-4 py-2'
                        onChange={(e) => onChangeInput(e, index)}
                        placeholder='Type PIC'
                      />
                    </td>
                    <td>
                      <input
                        name='telepon'
                        type='text'
                        className='form-input border px-4 py-2'
                        value={supplier.telepon}
                        onChange={(e) => onChangeInput(e, index)}
                        placeholder='Type Telepon'
                      />
                    </td>
                    <td>
                      <input
                        name='durasiTempo'
                        type='text'
                        className='form-input border px-4 py-2'
                        value={formatHari(supplier.durasiTempo)}
                        onChange={(e) => onChangeInput(e, index)}
                        placeholder='Type Durasi Tempo'
                      />
                    </td>
                    <td>
                      <input
                        name='creditLimit'
                        type='text'
                        value={formatRupiah(supplier.creditLimit)}
                        className='form-input border px-4 py-2'
                        onChange={(e) => onChangeInput(e, index)}
                        placeholder='Type Credit Limit'
                      />
                    </td>
                  </tr>
                ))}
                <tr>
                  <td>
                    <input
                      name='supplier'
                      value={newSupplier.supplier}
                      type='text'
                      className='form-input border px-4 py-2'
                      onChange={handleNewSupplierChange}
                      placeholder='Isi nama supplier anda'
                    />
                  </td>
                  <td>
                    <input
                      name='pic'
                      value={newSupplier.pic}
                      type='text'
                      className='form-input border px-4 py-2'
                      onChange={handleNewSupplierChange}
                      placeholder='Isi PIC supplier anda'
                    />
                  </td>
                  <td>
                    <input
                      name='telepon'
                      value={newSupplier.telepon}
                      type='text'
                      onChange={handleNewSupplierChange}
                      placeholder='Isi telepon supplier anda'
                      className='form-input border px-4 py-2'
                    />
                  </td>
                  <td>
                    <input
                      name='durasiTempo'
                      value={formatHari(newSupplier.durasiTempo)}
                      type='text'
                      onChange={handleNewSupplierChange}
                      className='form-input border px-4 py-2'
                      placeholder='Durasi jatuh tempo'
                    />
                  </td>
                  <td>
                    <input
                      name='creditLimit'
                      value={formatRupiah(newSupplier.creditLimit)}
                      type='text'
                      className='form-input border px-4 py-2'
                      onChange={handleNewSupplierChange}
                      placeholder='limit kredit'
                    />
                  </td>
                </tr>
              </tbody>
            </table>
          </form>
          <div className='flex items-center gap-4 mt-8'>
            <button
              onClick={handleAddNewSupplier}
              className='bg-gray-200 border border-gray-500 rounded-md text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
            >
              {<PlusCircleIcon className='w-5 mr-2' />}
              {''} Tambah data baru
            </button>
            <button
              onClick={simpanData}
              className='bg-gray-200 border border-gray-500 rounded-md text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
            >
              simpan data
            </button>
            <span className='text-sm opacity-60 text-red-500'>
              *Klik simpan sebelum lanjut ke tahap selanjutnya
            </span>
          </div>
        </div>
      )}
      {isMobile && (
        <div className='text-sm'>
          <div className='flex flex-col py-4 mt-8 justify-start'>
            <h1 className='font-bold text-xl'>
              Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
              <span className=' opacity-60 text-xl'>(Opsional)</span>
            </h1>
            <p className='opacity-60'>
              Data yang anda berikan hanya untuk bahan referensi internal kami
              untuk memberikan anda credit limit dan durasi tempo
            </p>
          </div>
          <div className='flex gap-4 flex-col'>
            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
            <h2 className='py-2 font-semibold text-base'>
              Daftar Nama Supplier
            </h2>
            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
            <div className=''>
              {supplierData.map((supplier, index) => (
                <div key={index}>
                  <div
                    className='flex flex-row justify-center items-center py-4'
                    onClick={() => toggleOpen(index)}
                  >
                    <p className='font-semibold text-base w-4/5'>
                      {supplier.supplier}
                    </p>
                    <div className='w-1/5 flex justify-end items-center gap-2'>
                      <Trash2Icon size={16} color='red' />
                      {openIndexes.includes(index) ? (
                        <ChevronUpIcon className='w-4' />
                      ) : (
                        <ChevronDownIcon className='w-4' />
                      )}
                    </div>
                  </div>
                  {openIndexes.includes(index) && (
                    <form className='flex flex-col w-full'>
                      <div className='w-full grid grid-row-2 gap-4'>
                        <div className='flex flex-row justify-start items-start'>
                          <div className='w-2/5'>
                            <label className='form-label text-nowrap'>
                              Nama Supplier
                            </label>
                          </div>
                          <div className='w-3/5 opacity-70'>
                            {supplier.supplier}
                          </div>
                        </div>

                        <div className='flex flex-row justify-start items-start'>
                          <div className='w-2/5'>
                            <label className='form-label text-nowrap'>
                              PIC
                            </label>
                          </div>
                          <div className='w-3/5 opacity-70'>{supplier.pic}</div>
                        </div>

                        <div className='flex flex-row justify-start items-start'>
                          <div className='w-2/5'>
                            <label className='form-label text-nowrap'>
                              Telepon
                            </label>
                          </div>
                          <div className='w-3/5 opacity-70'>
                            {supplier.telepon}
                          </div>
                        </div>

                        <div className='flex flex-row justify-start items-start'>
                          <div className='w-2/5'>
                            <label className='form-label text-nowrap'>
                              Durasi Tempo
                            </label>
                          </div>
                          <div className='w-3/5 opacity-70'>
                            {formatHari(supplier.durasiTempo)}
                          </div>
                        </div>

                        <div className='flex flex-row justify-start items-start'>
                          <div className='w-2/5'>
                            <label className='form-label text-nowrap'>
                              Kredit Limit
                            </label>
                          </div>
                          <div className='w-3/5 opacity-70'>
                            {formatRupiah(supplier.creditLimit)}
                          </div>
                        </div>
                      </div>
                    </form>
                  )}
                </div>
              ))}
            </div>
            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
            <h2 className='py-2 font-semibold text-base text-red-500 flex flex-row'>
              <PlusCircleIcon className='w-5 mr-2' />
              Tambah Data Baru
            </h2>
            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
            <form className='flex flex-col w-full'>
              <div className='w-full grid grid-row-2 gap-2'>
                <div className='flex flex-row justify-start items-start'>
                  <div className='w-2/5'>
                    <label className='form-label text-nowrap'>
                      Nama Supplier
                    </label>
                  </div>
                  <div className='w-3/5 opacity-70'>
                    <input
                      name='supplier'
                      value={newSupplier.supplier}
                      type='text'
                      className='form-input border px-4 py-2'
                      onChange={handleNewSupplierChange}
                      placeholder='Format: PT. ABC TESTING INDONESIA'
                    />
                  </div>
                </div>

                <div className='flex flex-row justify-start items-start'>
                  <div className='w-2/5'>
                    <label className='form-label text-nowrap'>PIC</label>
                  </div>
                  <div className='w-3/5 opacity-70'>
                    <input
                      name='pic'
                      value={newSupplier.pic}
                      type='text'
                      className='form-input border px-4 py-2'
                      onChange={handleNewSupplierChange}
                      placeholder='John Doe'
                    />
                  </div>
                </div>

                <div className='flex flex-row justify-start items-start'>
                  <div className='w-2/5'>
                    <label className='form-label text-nowrap'>Telepon</label>
                  </div>
                  <div className='w-3/5 opacity-70'>
                    <input
                      name='telepon'
                      value={newSupplier.telepon}
                      type='text'
                      onChange={handleNewSupplierChange}
                      placeholder='Format: 08123456789'
                      className='form-input border px-4 py-2'
                    />
                  </div>
                </div>

                <div className='flex flex-row justify-start items-start'>
                  <div className='w-2/5'>
                    <label className='form-label text-nowrap'>
                      Durasi Tempo
                    </label>
                  </div>
                  <div className='w-3/5 opacity-70'>
                    <input
                      name='durasiTempo'
                      value={formatHari(newSupplier.durasiTempo)}
                      type='text'
                      onChange={handleNewSupplierChange}
                      className='form-input border px-4 py-2'
                      placeholder='Isi durasi tempo supplier anda (hari)'
                    />
                  </div>
                </div>

                <div className='flex flex-row justify-start items-start'>
                  <div className='w-2/5'>
                    <label className='form-label text-nowrap'>
                      Kredit Limit
                    </label>
                  </div>
                  <div className='w-3/5 opacity-70'>
                    <input
                      name='creditLimit'
                      value={formatRupiah(newSupplier.creditLimit)}
                      type='text'
                      className='form-input border px-4 py-2'
                      onChange={handleNewSupplierChange}
                      placeholder='Rp 999.999.999'
                    />
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div className='flex flex-col justify-start items-start gap-4 mt-8'>
            <span className='text-xs opacity-60 text-red-500'>
              *Klik simpan sebelum lanjut ke tahap selanjutnya
            </span>
            <button
              onClick={simpanData}
              className='bg-gray-200 border border-gray-500 rounded-md w-full text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
            >
              simpan data
            </button>
          </div>
        </div>
      )}
    </>
  );
};

const validationSchema = Yup.object().shape({
  supplier: Yup.string().required('Harus di-isi'),
  pic: Yup.string().required('Harus di-isi'),
  telepon: Yup.string().required('Harus di-isi'),
  durasiTempo: Yup.string().required('Harus di-isi'),
  creditLimit: Yup.string().required('Harus di-isi'),
});

const defaultValues = {
  supplier: '',
  pic: '',
  telepon: '',
  durasiTempo: '',
  creditLimit: '',
};
export default Referensi;