import React from 'react';
import { useMemo, useState, useEffect, useRef } from 'react';
import Stepper from './Stepper';
import InformasiPerusahaan from './informasiPerusahaan';
import KontakPerusahaan from './KontakPerusahaan';
import { Controller, useForm } from 'react-hook-form';
import {
  usePengajuanTempoStore,
  usePengajuanTempoStoreKontakPerson,
} from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
const PengajuanTempo = () => {
  const [currentStep, setCurrentStep] = React.useState(0);
  const NUMBER_OF_STEPS = 6;
  const { form, errors, validate, updateForm } = usePengajuanTempoStore();
  const { control, watch, setValue } = useForm();
  const {
    formKontakPerson,
    errorsKontakPerson,
    validateKontakPerson,
    updateFormKontakPerson,
  } = usePengajuanTempoStoreKontakPerson();
  const [notValid, setNotValid] = useState(false);
  const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
  const stepDivs = [
    <InformasiPerusahaan
      chekValid={notValid}
      buttonSubmitClick={buttonSubmitClick}
    />,
    <KontakPerusahaan
      chekValid={notValid}
      buttonSubmitClick={buttonSubmitClick}
    />,
    <div>Kontak Person</div>,
    <div>Pengiriman</div>,
    <div>Referensi</div>,
    <div>Dokumen</div>,
    <div>Konfirmasi</div>,
  ];
  const stepDivsError = [
    errors,
    errorsKontakPerson,
    <div>Kontak Person</div>,
    <div>Pengiriman</div>,
    <div>Referensi</div>,
    <div>Dokumen</div>,
    <div>Konfirmasi</div>,
  ];
  const stepDivsForm = [
    form,
    formKontakPerson,
    <div>Kontak Person</div>,
    <div>Pengiriman</div>,
    <div>Referensi</div>,
    <div>Dokumen</div>,
    <div>Konfirmasi</div>,
  ];
  const stepDivsUpdateForm = [
    updateForm,
    updateFormKontakPerson,
    <div>Kontak Person</div>,
    <div>Pengiriman</div>,
    <div>Referensi</div>,
    <div>Dokumen</div>,
    <div>Konfirmasi</div>,
  ];
  const stepLabels = [
    'informasi_perusahaan',
    'kontak_person',
    'Pengiriman',
    'Referensi',
    'Dokumen',
    'Konfirmasi',
  ];

  const isFormValid = useMemo(
    () => Object.keys(stepDivsError[currentStep]).length === 0,
    [stepDivsError[currentStep]]
  );
  useEffect(() => {
    validateKontakPerson();
    validate();

    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  }, [currentStep]);

  useEffect(() => {
    const cachedData = getFromLocalStorage(stepLabels[currentStep]);
    if (cachedData) {
      // const formData = JSON.parse(cachedData);
      Object.keys(cachedData).forEach((key) => {
        stepDivsUpdateForm[currentStep](key, cachedData[key]);
      });
    }
  }, [currentStep]);
  const goToNextStep = () => {
    if (!isFormValid) {
      setNotValid(true);
      setButtonSubmitClick(!buttonSubmitClick);
      return;
    } else {
      saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]);
      const cachedData = getFromLocalStorage(stepLabels[currentStep]);
      setButtonSubmitClick(!buttonSubmitClick);
      setNotValid(false);
    }
    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
  };

  const goToPreviousStep = () => {
    setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1));
  };

  const saveToLocalStorage = (key, form) => {
    localStorage.setItem(key, JSON.stringify(form));
  };

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

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

  return (
    <>
      <div className='container flex flex-col items-center '>
        <h1 className='text-h-sm md:text-title-sm font-semibold text-center mb-6'>
          Form Pengajuan Tempo
        </h1>
        <p className='text-center mb-4'>
          Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim
          magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin
          ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam
          suspendisse.
        </p>
      </div>
      <div className='h-[2px] w-full mb-20 bg-gray_r-3' />
      <div className='container mt-10 flex flex-col '>
        <div className='flex items-center justify-center'>
          <Stepper currentStep={currentStep} numberOfSteps={NUMBER_OF_STEPS} />
        </div>
        <div>{stepDivs[currentStep]}</div>
        <section className='flex gap-10 mt-10'>
          {/* <button
            onClick={goToNextStep}
            className='bg-blue-600 text-white p-2 rounded-md'
            disabled={currentStep === NUMBER_OF_STEPS - 1} // Disable if on the last step
            >
            Next step
            </button> */}
        </section>
        <div className='flex flex-row justify-end items-center gap-4 mb-8'>
          <span className='text-xs opacity-60'>
            *Pastikan data yang anda masukan sudah benar dan sesuai
          </span>
          <button
            onClick={goToPreviousStep}
            className='bg-red-600 border border-red-600 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
            disabled={currentStep === 0} // Disable if on the first step
          >
            {<ChevronLeftIcon className='w-5' />}
            Langkah Sebelumnya
          </button>
          <button
            onClick={goToNextStep}
            disabled={currentStep === NUMBER_OF_STEPS - 1}
            className='bg-red-600 border border-red-600 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
          >
            Langkah Selanjutnya {<ChevronRightIcon className='w-5' />}
          </button>
        </div>
      </div>
    </>
  );
};

export default PengajuanTempo;