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 {
  usePengajuanTempoStoreDokumen,
  usePengajuanTempoStore,
} from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import KontakPerusahaan from './KontakPerusahaan';
import ProgressBar from '@ramonak/react-progress-bar';
import { UseToastOptions } from '@chakra-ui/react';
import odooApi from '~/libs/odooApi';
import { toast } from 'react-hot-toast';
import getFileBase64 from '@/core/utils/getFileBase64';
import { CheckCircleIcon } from '@heroicons/react/24/outline';
import InformasiPerusahaan from './informasiPerusahaan';
import Pengiriman from './Pengiriman';
import KonfirmasiDokumen from './KonfirmasiDokumen';
import useDevice from '@/core/hooks/useDevice';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
  const { control, watch, setValue, getValues } = useForm();
  const { isDesktop, isMobile } = useDevice();
  const [isOpenInformasi, setIsOpenInformasi] = useState(true);
  const [isOpenKontak, setIsOpenKontak] = useState(false);
  const [isOpenPengiriman, setIsOpenPengiriman] = useState(false);
  const [isOpenKonfirmasi, setIsOpenKonfirmasi] = useState(false);
  const [industries, setIndustries] = useState([]);
  const {
    formDokumen,
    errorsDokumen,
    validateDokumen,
    updateFormDokumen,
    getJumlahDokumenDiisi,
  } = usePengajuanTempoStoreDokumen();
  const { form, errors, validate, updateForm } = usePengajuanTempoStore();
  const handleInputChange = async (event) => {
    let fileBase64 = '';
    const { name } = event.target;
    const file = event.target.files?.[0];
    // Allowed file extensions
    const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg'];
    let fileExtension = '';
    if (file) {
      fileExtension = file.name.split('.').pop()?.toLowerCase();

      if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
        toast.error(
          'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
          { duration: 4000 }
        );

        event.target.value = '';
        return;
      }
      if (file.size > 2000000) {
        toast.error('Maksimal ukuran file adalah 2MB', { duration: 4000 });

        event.target.value = '';
        return;
      }

      fileBase64 = await getFileBase64(file);
      updateFormDokumen(name, file.name, fileExtension, fileBase64);
      validateDokumen();
    }
  };

  const isFormValid = useMemo(
    () => Object.keys(errorsDokumen).length === 0,
    [errorsDokumen]
  );
  const dokumenNibRef = useRef(null);
  const dokumenNpwpRef = useRef(null);
  const dokumenSppkpRef = useRef(null);
  const dokumenAktaPerubahanRef = useRef(null);
  const dokumenKtpDirutRef = useRef(null);
  const dokumenAktaPendirianRef = useRef(null);
  const dokumenLaporanKeuanganRef = useRef(null);
  const dokumenFotoKantorRef = useRef(null);
  const dokumenTempatBekerjaRef = useRef(null);

  useEffect(() => {
    const loadIndustries = async () => {
      if (!isFormValid) {
        const options = {
          behavior: 'smooth',
          block: 'center',
        };
        if (errorsDokumen.dokumenNib && dokumenNibRef.current) {
          dokumenNibRef.current.scrollIntoView(options);
          return;
        }
        if (errorsDokumen.dokumenNpwp && dokumenNpwpRef.current) {
          dokumenNpwpRef.current.scrollIntoView(options);
          return;
        }
        if (errorsDokumen.dokumenSppkp && dokumenSppkpRef.current) {
          dokumenSppkpRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsDokumen.dokumenAktaPerubahan &&
          dokumenAktaPerubahanRef.current
        ) {
          dokumenAktaPerubahanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsDokumen.dokumenKtpDirut && dokumenKtpDirutRef.current) {
          dokumenKtpDirutRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsDokumen.dokumenAktaPendirian &&
          dokumenAktaPendirianRef.current
        ) {
          dokumenAktaPendirianRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsDokumen.dokumenLaporanKeuangan &&
          dokumenLaporanKeuanganRef.current
        ) {
          dokumenLaporanKeuanganRef.current.scrollIntoView(options);
          return;
        }
        if (errorsDokumen.dokumenFotoKantor && dokumenFotoKantorRef.current) {
          dokumenFotoKantorRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsDokumen.dokumenTempatBekerja &&
          dokumenTempatBekerjaRef.current
        ) {
          dokumenTempatBekerjaRef.current.scrollIntoView(options);
          return;
        }
      }
    };
    loadIndustries();
  }, [buttonSubmitClick, chekValid]);

  useEffect(() => {
    validateDokumen();
  }, [buttonSubmitClick]);

  useEffect(() => {
    const loadIndustries = async () => {
      const dataIndustries = await odooApi('GET', '/api/v1/partner/industry');
      setIndustries(
        dataIndustries?.map((o) => ({
          value: o.id,
          label: o.name,
          category: o.category,
        }))
      );
    };
    loadIndustries();
  }, []);

  useEffect(() => {
    const selectedIndustryType = industries.find(
      (industry) => industry.value === watch('industry_id')
    );
    if (selectedIndustryType) {
      updateForm('industry_id', `${selectedIndustryType?.value}`);
      validate();
    }
  }, [watch('industry_id'), industries]);

  useEffect(() => {
    if (form.industry_id) {
      setValue('industry_id', parseInt(form.industry_id));
    }
  }, [form]);
 
  return (
    <>
      {isDesktop && (
        <form className='flex mt-4 flex-col w-full '>
          <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
            <div className='w-full flex flex-col gap-5 '>
              <div className=''>
                <InformasiPerusahaan isKonfirmasi={true} />
              </div>
              <div className='h-px bg-gray-300'></div>
              <div className=''>
                <KontakPerusahaan isKonfirmasi={true} />
              </div>
            </div>

            <div className='w-px bg-gray-300'></div>
            <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'>
              <div>
                <Pengiriman isKonfirmasi={true} />
              </div>
              <div className='h-px bg-gray-300'></div>
              <div>
                <KonfirmasiDokumen isKonfirmasi={true} />
              </div>
            </div>
          </div>
        </form>
      )}
      {isMobile && (
        <form className='flex mt-8 py-4 flex-col w-full gap-4'>
          <div className='flex flex-col gap-4'>
            <div className='flex flex-row justify-between items-center'>
              <div className='flex flex-col justify-center items-start'>
                <p className='font-semibold text-lg'>Informasi Perusahaan</p>
                <span className='text-xs opacity-70'>
                  Pastikan informasi usaha yang anda masukkan sudah sesuai
                  dengan data perusahaan anda
                </span>
              </div>
              <div className='p-2 bg-gray-200'>
                {isOpenInformasi ? (
                  <ChevronUpIcon
                    className='w-4'
                    onClick={() => setIsOpenInformasi(!isOpenInformasi)}
                  />
                ) : (
                  <ChevronDownIcon
                    className='w-4'
                    onClick={() => setIsOpenInformasi(!isOpenInformasi)}
                  />
                )}
              </div>
            </div>
            {isOpenInformasi && <InformasiPerusahaan isKonfirmasi={true} />}
            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
          </div>
          <div className='flex flex-col gap-4'>
            <div className='flex flex-row justify-between'>
              <p className='font-semibold text-lg'>Kontak Person</p>
              <div className='p-2 bg-gray-200'>
                {isOpenKontak ? (
                  <ChevronUpIcon
                    className='w-4'
                    onClick={() => setIsOpenKontak(!isOpenKontak)}
                  />
                ) : (
                  <ChevronDownIcon
                    className='w-4'
                    onClick={() => setIsOpenKontak(!isOpenKontak)}
                  />
                )}
              </div>
            </div>
            {isOpenKontak && <KontakPerusahaan isKonfirmasi={true} />}
            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
          </div>
          <div className='flex flex-col gap-4'>
            <div className='flex flex-row justify-between'>
              <p className='font-semibold text-lg'>Pengiriman</p>
              <div className='p-2 bg-gray-200'>
                {isOpenPengiriman ? (
                  <ChevronUpIcon
                    className='w-4'
                    onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
                  />
                ) : (
                  <ChevronDownIcon
                    className='w-4'
                    onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
                  />
                )}
              </div>
            </div>
            {isOpenPengiriman && <Pengiriman isKonfirmasi={true} />}
            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
          </div>
          <div className='flex flex-col gap-4'>
            <div className='flex flex-row justify-between'>
              <p className='font-semibold text-lg'>Dokumen</p>
              <div className='p-2 bg-gray-200'>
                {isOpenKonfirmasi ? (
                  <ChevronUpIcon
                    className='w-4'
                    onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
                  />
                ) : (
                  <ChevronDownIcon
                    className='w-4'
                    onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
                  />
                )}
              </div>
            </div>
            {isOpenKonfirmasi && <KonfirmasiDokumen isKonfirmasi={true} />}
          </div>
        </form>
      )}
    </>
  );
};

export default Konfirmasi;