import React from 'react';
import { useMemo, useState, useEffect, useRef } from 'react';
import Stepper from './Stepper';
import InformasiPerusahaan from './informasiPerusahaan';
import KontakPerusahaan from './KontakPerusahaan';
import Pengiriman from './Pengiriman';
import Referensi from './Referensi';
import Dokumen from './Dokumen';
import Konfirmasi from './Konfirmasi';
import useAuth from '@/core/hooks/useAuth';
import { useRouter } from 'next/router';
import { Controller, useForm } from 'react-hook-form';
import {
  usePengajuanTempoStore,
  usePengajuanTempoStoreKontakPerson,
  usePengajuanTempoStorePengiriman,
  usePengajuanTempoStoreSupplier,
  usePengajuanTempoStoreDokumen,
} from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
import createPengajuanTempoApi from '../api/createPengajuanTempoApi';
import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
import clsxm from '~/libs/clsxm';
import { toast } from 'react-hot-toast';
const PengajuanTempo = () => {
  const [currentStep, setCurrentStep] = React.useState(0);
  const NUMBER_OF_STEPS = 6;
  const [isLoading, setIsLoading] = useState(false);
  const { form, errors, validate, updateForm } = usePengajuanTempoStore();
  const { control, watch, setValue } = useForm();
  const auth = useAuth();
  const router = useRouter();
  const { formDokumen, errorsDokumen, validateDokumen, updateFormDokumen } =
    usePengajuanTempoStoreDokumen();
  const {
    formKontakPerson,
    errorsKontakPerson,
    validateKontakPerson,
    updateFormKontakPerson,
  } = usePengajuanTempoStoreKontakPerson();
  const {
    formSupplier,
    errorsSupplier,
    validateSupplier,
    updateFormSupplier,
    hasSavedata,
    updateHasSave,
  } = usePengajuanTempoStoreSupplier();
  const {
    formPengiriman,
    errorsPengiriman,
    validatePengiriman,
    updateFormPengiriman,
  } = usePengajuanTempoStorePengiriman();
  const [notValid, setNotValid] = useState(false);
  const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
  const stepDivs = [
    <InformasiPerusahaan
      key='informasi-perusahaan'
      chekValid={notValid}
      buttonSubmitClick={buttonSubmitClick}
    />,
    <KontakPerusahaan
      key='kontak-perusahaan'
      chekValid={notValid}
      buttonSubmitClick={buttonSubmitClick}
    />,
    <Pengiriman
      key='pengiriman'
      chekValid={notValid}
      buttonSubmitClick={buttonSubmitClick}
    />,
    <Referensi
      key='referensi'
      chekValid={notValid}
      buttonSubmitClick={buttonSubmitClick}
    />,
    <Dokumen
      key='dokumen'
      chekValid={notValid}
      buttonSubmitClick={buttonSubmitClick}
    />,
    <Konfirmasi
      key='konfirmasi'
      chekValid={notValid}
      buttonSubmitClick={buttonSubmitClick}
    />,
  ];

  const stepDivsError = [
    errors,
    errorsKontakPerson,
    errorsPengiriman,
    errorsSupplier,
    errorsDokumen,
    <div key='konfirmasi'>Konfirmasi</div>,
  ];
  const stepDivsForm = [
    form,
    formKontakPerson,
    formPengiriman,
    formSupplier,
    formDokumen,
    '',
  ];
  const stepDivsUpdateForm = [
    updateForm,
    updateFormKontakPerson,
    updateFormPengiriman,
    updateFormSupplier,
    updateFormDokumen,
    <div key='konfirmasi'>Konfirmasi</div>,
  ];
  const stepLabels = [
    'informasi_perusahaan',
    'kontak_person',
    'Pengiriman',
    'Referensi',
    'Dokumen',
    'Konfirmasi',
  ];
  const isFormValid = useMemo(
    () => Object.keys(stepDivsError[currentStep]).length === 0,
    [stepDivsError[currentStep]]
  );
  useEffect(() => {
    validate();
    validateKontakPerson();
    validatePengiriman();
    validateDokumen();
    updateHasSave(false);

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

  useEffect(() => {
    const cachedData = getFromLocalStorage(stepLabels[currentStep]);
    if (cachedData) {
      if (currentStep == 3) {
        stepDivsUpdateForm[currentStep](cachedData);
      } else if (currentStep == 4) {
        Object.keys(cachedData).forEach((key) => {
          const { name, format, base64 } = cachedData[key];
          stepDivsUpdateForm[currentStep](key, name, format, base64);
        });
      } else {
        Object.keys(cachedData).forEach((key) => {
          stepDivsUpdateForm[currentStep](key, cachedData[key]);
        });
      }
    }
    validate();
    validateKontakPerson();
    validatePengiriman();
    validateDokumen();
    updateHasSave(false);
  }, [currentStep]);
  const goToNextStep = () => {
    if (!isFormValid) {
      setNotValid(true);
      setButtonSubmitClick(!buttonSubmitClick);
      return;
    } else {
      saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]);
      setButtonSubmitClick(!buttonSubmitClick);
      setNotValid(false);
    }
    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
  };

  const splitDataAndSend = async (data, partSize = 50000) => {
    const totalDataSize = JSON.stringify(data).length;

    if (totalDataSize <= partSize) {
      return await createPengajuanTempoApi(data);
    }
    const dataParts = [];
    let currentIndex = 0;

    while (currentIndex < totalDataSize) {
      const part = JSON.stringify(data).slice(
        currentIndex,
        currentIndex + partSize
      );
      dataParts.push(part);
      currentIndex += partSize;
    }

    const responses = [];
    for (let i = 0; i < dataParts.length; i++) {
      const partData = {
        data: dataParts[i],
        part: i + 1,
        totalParts: dataParts.length,
      };
      responses.push(await createPengajuanTempoApi(partData));
    }

    return responses;
  };

  const handleDaftarTempo = async () => {
    for (const error of stepDivsError) {
      if (error.length > 0) {
        return;
      }
    }
    const productOrder = formSupplier.map((product) => ({
      supplier: product.supplier,
      pic: product.pic,
      telepon: product.telepon,
      durasiTempo: product.durasiTempo,
      creditLimit: product.creditLimit,
    }));

    const formattedDokumen = Object.entries(formDokumen).map(([key, doc]) => ({
      documentName: key,
      details: {
        name: doc.name,
        format: doc.format,
        base64: doc.base64,
      },
    }));
    const data2 = {
      ...form,
      ...formKontakPerson,
      ...formPengiriman,
      formDocs: JSON.stringify(formattedDokumen),
      formSupplier: JSON.stringify(productOrder),
      user_id: auth.id,
    };
    const toastId = toast.loading('Mengirimkan formulir pengajuan tempo...');
    setIsLoading(true);
    try {
      const address = await splitDataAndSend(data2);
      toast.dismiss(toastId);
      setIsLoading(false);

      if (address) {
        toast.success('Pengajuan tempo berhasil dilakukan');
        // removeFromLocalStorage();
        router.push('/pengajuan-tempo/finish?tempo_id=SO-2023-06480');
      }
    } catch (error) {
      toast.dismiss(toastId);
      setIsLoading(false);

      toast.error('Terjadi kesalahan dalam pengiriman formulir');
      console.error(error);
    }
  };

  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;
  };
  const removeFromLocalStorage = () => {
    for (const key of stepLabels) {
      localStorage.removeItem(key);
    }
  };

  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' />
      {isLoading && (
        <div className='fixed inset-0 bg-black bg-opacity-10 flex items-center justify-center z-[999] backdrop-blur-sm'></div>
      )}
      <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'></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>
          {currentStep < 5 && (
            <Tooltip
              label={clsxm({
                'Klik simpan data terlebih dahulu':
                  currentStep === 3 && !hasSavedata,
              })}
            >
              <Button
                colorScheme='red'
                w='fit'
                isDisabled={
                  (currentStep === 3 && !hasSavedata) ||
                  currentStep === NUMBER_OF_STEPS - 1
                }
                onClick={goToNextStep}
              >
                Langkah Selanjutnya {<ChevronRightIcon className='w-5' />}
              </Button>
            </Tooltip>
          )}
          {currentStep == 5 && (
            <Button colorScheme='red' w='fit' onClick={handleDaftarTempo}>
              Daftar Tempo {<ChevronRightIcon className='w-5' />}
            </Button>
          )}
        </div>
      </div>
    </>
  );
};

export default PengajuanTempo;