import React from 'react';
import { useMemo, useState, useEffect, useRef } from 'react';
import Stepper from './Stepper';
import InformasiPerusahaan from './informasiPerusahaan';
import { Controller, useForm } from 'react-hook-form';
import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import { ChevronRightIcon } 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 [notValid, setNotValid] = useState(false);
  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
  const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
  const stepDivs = [
    <InformasiPerusahaan
      chekValid={notValid}
      buttonSubmitClick={buttonSubmitClick}
    />,
    <div>Kontak Person</div>,
    <div>Pengiriman</div>,
    <div>Referensi</div>,
    <div>Dokumen</div>,
    <div>Konfirmasi</div>,
  ];

  useEffect(() => {
    validate();
  }, []);

  const goToNextStep = () => {
    if (!isFormValid) {
      setNotValid(true);
      setButtonSubmitClick(!buttonSubmitClick);
      console.log('form', form);
      console.log('error', errors);
      return;
    } else {
      console.log('form', form);
      console.log('error', errors);
      setButtonSubmitClick(!buttonSubmitClick);
      setNotValid(false);
    }
    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
  };

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

  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={goToPreviousStep}
            className='bg-blue-600 text-white p-2 rounded-md'
            disabled={currentStep === 0} // Disable if on the first step
          >
            Previous step
          </button> */}
          {/* <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={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;