import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Controller, set, useForm } from 'react-hook-form';
import { usePengajuanTempoStoreDokumen } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import ProgressBar from '@ramonak/react-progress-bar';
import { UseToastOptions } from '@chakra-ui/react';
import { toast } from 'react-hot-toast';
import getFileBase64 from '@/core/utils/getFileBase64';
import useDevice from '@/core/hooks/useDevice';
import imageCompression from 'browser-image-compression';
const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
  const { control, watch } = useForm();
  const {
    formDokumen,
    errorsDokumen,
    validateDokumen,
    updateFormDokumen,
    getJumlahDokumenDiisi,
  } = usePengajuanTempoStoreDokumen();
  const { isDesktop, isMobile } = useDevice();
  // const handleInputChange = (event) => {
  //   const { name, value } = event.target;
  //   updateFormDokumen(name, value);
  //   validateDokumen();
  // };
  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(); // Extract file extension

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

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

      // Check for file size
      if (file.size > 2000000) {
        // try {
        //   const toastId = toast.loading('mencoba mengompresi file...');
        //   // Compress image file
        //   const options = {
        //     maxSizeMB: 0.5, // Target size in MB
        //     maxWidthOrHeight: 1920, // Adjust as needed
        //     useWebWorker: true,
        //   };
        //   const compressedFile = await imageCompression(file, options);
        //   toast.success('berhasil mengompresi file', { duration: 4000 });
        //   // Convert compressed file to Base64
        //   fileBase64 = await getFileBase64(compressedFile);
        //   updateFormDokumen(
        //     name,
        //     compressedFile.name,
        //     fileExtension,
        //     fileBase64
        //   );
        // } catch (error) {
        //   toast.error('Gagal mengompresi file', { duration: 4000 });
        // }
        toast.error('Max File Upload 2MB', { duration: 4000 });
      } else {
        // Convert file to Base64
        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(() => {
    validateDokumen();
    // window.scrollTo({
    //   top: 0,
    //   behavior: 'smooth',
    // });
    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]);
  return (
    <>
      {isDesktop && (
        <div>
          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
            Dokumen
          </h1>
          <form className='flex mt-4 flex-col w-full '>
            <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
              <div className='kolom-kiri w-full grid grid-rows-2 gap-7 '>
                <div
                  className='w-full grid grid-cols-2 gap-5'
                  ref={dokumenNpwpRef}
                >
                  <div>
                    <label className='form-label  text-nowrap'>
                      NPWP Perusahaan
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenNpwp'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenNpwp?.name
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenNpwp}
                        id='dokumenNpwp'
                        name='dokumenNpwp'
                        type='file'
                        title=' '
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenNpwp}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenNpwp?.name}
                      </span>
                    </div>
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenNpwp}
                      </div>
                    )}
                  </div>
                </div>

                <div
                  className='w-full grid grid-cols-2 gap-5'
                  ref={dokumenSppkpRef}
                >
                  <div>
                    <label className='form-label  text-nowrap'>SPPKP</label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenSppkp'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenSppkp?.name.length > 0
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenSppkp}
                        id='dokumenSppkp'
                        name='dokumenSppkp'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenSppkp}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenSppkp?.name}
                      </span>
                    </div>

                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenSppkp}
                      </div>
                    )}
                  </div>
                </div>

                <div
                  className='w-full grid grid-cols-2 gap-5'
                  ref={dokumenNibRef}
                >
                  <div>
                    <label className='form-label  text-nowrap'>
                      NIB
                      <span className='text-danger-500 text-xl'>*</span>
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenNib'
                        className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded min-w-40 text-center'
                      >
                        {formDokumen?.dokumenNib?.name
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen?.dokumenNib?.name}
                        id='dokumenNib'
                        name='dokumenNib'
                        type='file'
                        title=' '
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenNib}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenNib?.name}
                      </span>
                    </div>
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenNib}
                      </div>
                    )}
                  </div>
                </div>

                <div className='w-full grid grid-cols-2 gap-5'>
                  <div>
                    <label className='form-label  text-nowrap'>
                      SIUP <span className=' opacity-60'>(Opsional)</span>{' '}
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start '>
                      <label
                        htmlFor='dokumenSiup'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenSiup?.name.length > 0
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenAktaPerubahan}
                        id='dokumenSiup'
                        name='dokumenSiup'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenAktaPerubahan}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenSiup?.name}
                      </span>
                    </div>
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenSiup}
                      </div>
                    )}
                  </div>
                </div>

                <div className='w-full grid grid-cols-2 gap-5'>
                  <div>
                    <label className='form-label  text-nowrap'>
                      TDP <span className=' opacity-60'>(Opsional)</span>{' '}
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenTdp'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenTdp?.name.length > 0
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenAktaPerubahan}
                        id='dokumenTdp'
                        name='dokumenTdp'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenTdp}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenTdp?.name}
                      </span>
                    </div>
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenTdp}
                      </div>
                    )}
                  </div>
                </div>

                <div className='w-full grid grid-cols-2 gap-5'>
                  <div>
                    <label className='form-label  text-nowrap'>
                      SKDP <span className=' opacity-60'>(Opsional)</span>{' '}
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenSkdp'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenSkdp?.name.length > 0
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenAktaPerubahan}
                        id='dokumenSkdp'
                        name='dokumenSkdp'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenSkdp}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenSkdp?.name}
                      </span>
                    </div>
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenSkdp}
                      </div>
                    )}
                  </div>
                </div>

                <div className='w-full grid grid-cols-2 gap-5'>
                  <div>
                    <label className='form-label  text-nowrap'>
                      SKT <span className=' opacity-60'>(Opsional)</span>{' '}
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenSkt'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenSkt?.name.length > 0
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenAktaPerubahan}
                        id='dokumenSkt'
                        name='dokumenSkt'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenSkt}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenSkt?.name}
                      </span>
                    </div>
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenSkt}
                      </div>
                    )}
                  </div>
                </div>
              </div>
              <div className='w-px bg-gray-300'></div>
              <div
                className='kolom kanan w-full grid grid-rows-2 gap-10 '
                ref={dokumenAktaPendirianRef}
              >
                <div className='w-full grid grid-cols-2 gap-5'>
                  <div>
                    <label className='form-label  text-nowrap'>
                      Akta Pendirian{' '}
                      <span className=' opacity-60'>(Opsional)</span>{' '}
                      <span className='text-danger-500 text-xl'>*</span>
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenAktaPendirian'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenAktaPendirian?.name
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenAktaPendirian}
                        id='dokumenAktaPendirian'
                        name='dokumenAktaPendirian'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenAktaPendirian}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenAktaPendirian?.name}
                      </span>
                    </div>

                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenAktaPendirian}
                      </div>
                    )}
                  </div>
                </div>

                <div
                  className='w-full grid grid-cols-2 gap-5'
                  ref={dokumenAktaPerubahanRef}
                >
                  <div>
                    <label className='form-label  text-nowrap'>
                      Akta Perubahan{' '}
                      <span className=' opacity-60'>(Opsional)</span>{' '}
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenAktaPerubahan'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenAktaPerubahan?.name.length > 0
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenAktaPerubahan}
                        id='dokumenAktaPerubahan'
                        name='dokumenAktaPerubahan'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenAktaPerubahan}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenAktaPerubahan?.name}
                      </span>
                    </div>
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenAktaPerubahan}
                      </div>
                    )}
                  </div>
                </div>

                <div
                  className='w-full grid grid-cols-2 gap-5'
                  ref={dokumenTempatBekerjaRef}
                >
                  <div>
                    <label className='form-label  text-nowrap'>
                      Foto Ruangan Tempat Kerja
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenTempatBekerja'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenTempatBekerja?.name
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenTempatBekerja}
                        id='dokumenTempatBekerja'
                        name='dokumenTempatBekerja'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenTempatBekerja}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenTempatBekerja?.name}
                      </span>
                    </div>

                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenTempatBekerja}
                      </div>
                    )}
                  </div>
                </div>

                <div
                  className='w-full grid grid-cols-2 gap-5'
                  ref={dokumenFotoKantorRef}
                >
                  <div>
                    <label className='form-label  text-nowrap'>
                      Foto Kantor (Tampak Depan)
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenFotoKantor'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenFotoKantor?.name
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenFotoKantor}
                        id='dokumenFotoKantor'
                        name='dokumenFotoKantor'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenFotoKantor}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenFotoKantor?.name}
                      </span>
                    </div>

                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenFotoKantor}
                      </div>
                    )}
                  </div>
                </div>

                <div
                  className='w-full grid grid-cols-2 gap-5'
                  ref={dokumenKtpDirutRef}
                >
                  <div>
                    <label className='form-label  text-nowrap'>
                      KTP Dirut/Direktur{' '}
                      <span className=' opacity-60'>(Opsional)</span>{' '}
                      <span className='text-danger-500 text-xl'>*</span>
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenKtpDirut'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenKtpDirut?.name
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenKtpDirut}
                        id='dokumenKtpDirut'
                        name='dokumenKtpDirut'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenKtpDirut}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenKtpDirut?.name}
                      </span>
                    </div>

                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenKtpDirut}
                      </div>
                    )}
                  </div>
                </div>
                <div
                  className='w-full grid grid-cols-2 gap-5'
                  ref={dokumenLaporanKeuanganRef}
                >
                  <div>
                    <label className='form-label  text-nowrap'>
                      Laporan Keuangan
                      <span className=' opacity-60'>(Opsional)</span>
                    </label>
                    <span className='text-xs opacity-60 text-red-500'>
                      Format: pdf, jpeg, jpg, png. max file size 2MB
                    </span>
                  </div>
                  <div className=''>
                    <div className='flex flex-col items-start'>
                      <label
                        htmlFor='dokumenLaporanKeuangan'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {formDokumen?.dokumenLaporanKeuangan?.name
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        // value={formDokumen.dokumenLaporanKeuangan}
                        id='dokumenLaporanKeuangan'
                        name='dokumenLaporanKeuangan'
                        type='file'
                        className='hidden'
                        aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
                        onChange={handleInputChange}
                        accept='.pdf,.png,.jpg,.jpeg'
                      />
                      <span className='mt-2 text-gray-600 line-clamp-2'>
                        {formDokumen?.dokumenLaporanKeuangan?.name}
                      </span>
                    </div>

                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsDokumen.dokumenLaporanKeuangan}
                      </div>
                    )}
                  </div>
                </div>

                <div></div>
              </div>
            </div>
          </form>
          <div className='w-1/2 mt-8 flex gap-3 flex-col'>
            <span className='opacity-75 text-danger-500 text-sm'>
              *Jika anda ingin kredit limit lebih dari 25 Juta, harap lampirkan
              dokumen yang diberi tanda bintang *)
            </span>
            <div className='flex justify-between'>
              <p className='font-bold'>Upload Progress</p>
              <p>
                <span className='text-red-500 font-bold'>
                  {parseInt((getJumlahDokumenDiisi() / 13) * 100)} %
                </span>
                <span className='ml-2 opacity-60'>
                  {getJumlahDokumenDiisi() >= 5
                    ? getJumlahDokumenDiisi() == 13
                      ? 'Selesai'
                      : 'Sedikit Lagi'
                    : ''}
                </span>
              </p>
            </div>
            {/* 50 keatas baru muncul kata kata sedikit lagi */}
            <ProgressBar
              completed={getJumlahDokumenDiisi()}
              bgColor='#ef4444'
              labelAlignment='outside'
              isLabelVisible={false}
              baseBgColor='#E5E7EB'
              labelColor='#e80909'
              labelSize='0'
              maxCompleted={13}
              height='14px'
            />
            <span className='opacity-75'>
              Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses
              dengan cepat
            </span>
          </div>
        </div>
      )}
      {isMobile && (
        <div>
          <h1
            className={`font-bold py-4 mt-8 ${
              isKonfirmasi ? 'text-xl' : 'text-xl'
            }`}
          >
            Dokumen
          </h1>
          <form className='flex mt-4 flex-col w-full '>
            <div className='w-full flex flex-col gap-4'>
              <div className='w-full flex flex-col gap-2' ref={dokumenNpwpRef}>
                <label className='form-label  text-nowrap'>
                  NPWP Perusahaan
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenNpwp'
                    className='cursor-pointer   bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenNpwp?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenNpwp'
                    name='dokumenNpwp'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenNpwp}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenNpwp?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenNpwp}
                  </div>
                )}
              </div>

              <div className='w-full flex flex-col gap-2' ref={dokumenSppkpRef}>
                <label className='form-label  text-nowrap'>SPPKP</label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenSppkp'
                    className='cursor-pointer  bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenSppkp?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenSppkp'
                    name='dokumenSppkp'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenSppkp}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenSppkp?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSppkp}
                  </div>
                )}
              </div>
              <div className='w-full flex flex-col gap-2' ref={dokumenNibRef}>
                <label className='form-label  text-nowrap'>
                  NIB
                  <span className='text-danger-500 text-xl'>*</span>
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenNib'
                    className='cursor-pointer   bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenNib?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen?.dokumenNib?.name}
                    id='dokumenNib'
                    name='dokumenNib'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenNib}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenNib?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenNib}
                  </div>
                )}
              </div>

              <div className='w-full flex flex-col gap-2'>
                <label className='form-label  text-nowrap'>
                  SIUP <span className=' opacity-60'>(Opsional)</span>
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenSiup'
                    className='cursor-pointer  bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenSiup?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenSiup'
                    name='dokumenSiup'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenSiup}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenSiup?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSiup}
                  </div>
                )}
              </div>

              <div className='w-full flex flex-col gap-2'>
                <label className='form-label  text-nowrap'>
                  TDP <span className=' opacity-60'>(Opsional)</span>
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenTdp'
                    className='cursor-pointer  bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenTdp?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenTdp'
                    name='dokumenTdp'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenTdp}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenTdp?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenTdp}
                  </div>
                )}
              </div>
              <div className='w-full flex flex-col gap-2'>
                <label className='form-label  text-nowrap'>
                  SKDP <span className=' opacity-60'>(Opsional)</span>
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenSkdp'
                    className='cursor-pointer  bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenTdp?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenSkdp'
                    name='dokumenSkdp'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenSkdp}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenSkdp?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSkdp}
                  </div>
                )}
              </div>
              <div className='w-full flex flex-col gap-2'>
                <label className='form-label  text-nowrap'>
                  SKT <span className=' opacity-60'>(Opsional)</span>
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenSkt'
                    className='cursor-pointer  bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenSkt?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenSkt'
                    name='dokumenSkt'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenSkt}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenSkt?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSkdp}
                  </div>
                )}
              </div>
              <div
                className='w-full flex flex-col gap-2'
                ref={dokumenAktaPendirianRef}
              >
                <label className='form-label  text-nowrap'>
                  Akta Pendirian <span className=' opacity-60'>(Opsional)</span>{' '}
                  <span className='text-danger-500 text-xl'>*</span>
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenAktaPendirian'
                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenAktaPendirian?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenAktaPendirian'
                    name='dokumenAktaPendirian'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenAktaPendirian}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenAktaPendirian?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenAktaPendirian}
                  </div>
                )}
              </div>
              <div
                className='w-full flex flex-col gap-2'
                ref={dokumenAktaPerubahanRef}
              >
                <label className='form-label  text-nowrap'>
                  Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenAktaPerubahan'
                    className='cursor-pointer  bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenAktaPerubahan?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenAktaPerubahan'
                    name='dokumenAktaPerubahan'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenAktaPerubahan}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenAktaPerubahan?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenAktaPerubahan}
                  </div>
                )}
              </div>

              <div
                className='w-full flex flex-col gap-2'
                ref={dokumenTempatBekerjaRef}
              >
                <label className='form-label  text-nowrap'>
                  Foto Ruangan Tempat Kerja
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenTempatBekerja'
                    className='cursor-pointer  bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenTempatBekerja?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenTempatBekerja'
                    name='dokumenTempatBekerja'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenTempatBekerja}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenTempatBekerja?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenTempatBekerja}
                  </div>
                )}
              </div>
              <div
                className='w-full flex flex-col gap-2'
                ref={dokumenFotoKantorRef}
              >
                <label className='form-label  text-nowrap'>
                  Foto Kantor (Tampak Depan)
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenFotoKantor'
                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenFotoKantor?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenFotoKantor'
                    name='dokumenFotoKantor'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenFotoKantor}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenFotoKantor?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenFotoKantor}
                  </div>
                )}
              </div>
              <div
                className='w-full flex flex-col gap-2'
                ref={dokumenKtpDirutRef}
              >
                <label className='form-label  text-nowrap'>
                  KTP Dirut/Direktur{' '}
                  <span className=' opacity-60'>(Opsional)</span>{' '}
                  <span className='text-danger-500 text-xl'>*</span>
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenKtpDirut'
                    className='cursor-pointer  bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenKtpDirut?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenKtpDirut'
                    name='dokumenKtpDirut'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenKtpDirut}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
                    {formDokumen?.dokumenKtpDirut?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenKtpDirut}
                  </div>
                )}
              </div>

              <div
                className='w-full flex flex-col gap-2'
                ref={dokumenLaporanKeuanganRef}
              >
                <label className='form-label  text-nowrap'>
                  Laporan Keuangan{' '}
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
                <div className='flex flex-row gap-2'>
                  <label
                    htmlFor='dokumenLaporanKeuangan'
                    className='cursor-pointer  bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                  >
                    {formDokumen?.dokumenLaporanKeuangan?.name
                      ? 'Ubah Dokumen'
                      : 'Upload Dokumen'}
                  </label>
                  <input
                    // value={formDokumen.dokumenNpwp}
                    id='dokumenLaporanKeuangan'
                    name='dokumenLaporanKeuangan'
                    type='file'
                    title=' '
                    className='hidden'
                    aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
                    onChange={handleInputChange}
                    accept='.pdf,.png,.jpg,.jpeg'
                  />
                  <span className='mt-2 text-gray-600 truncate'>
                    {formDokumen?.dokumenLaporanKeuangan?.name}
                  </span>
                </div>
                <span className='text-xs opacity-60 text-red-500'>
                  Format: pdf, jpeg, jpg, png. max file size 2MB
                </span>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenLaporanKeuangan}
                  </div>
                )}
              </div>
            </div>
          </form>
          <div className='w-full mt-8 flex gap-3 flex-col'>
            <span className='opacity-75 text-danger-500 text-xs'>
              *Jika anda ingin kredit limit lebih dari 25 Juta, harap lampirkan
              dokumen yang diberi tanda bintang *)
            </span>
            <div className='flex justify-between'>
              <p className='font-bold'>Upload Progress</p>
              <p>
                <span className='text-red-500 font-bold'>
                  {parseInt((getJumlahDokumenDiisi() / 13) * 100)} %
                </span>
                <span className='ml-2 opacity-60'>
                  {getJumlahDokumenDiisi() >= 5
                    ? getJumlahDokumenDiisi() == 13
                      ? 'Selesai'
                      : 'Sedikit Lagi'
                    : ''}
                </span>
              </p>
            </div>
            {/* 50 keatas baru muncul kata kata sedikit lagi */}
            <ProgressBar
              completed={getJumlahDokumenDiisi()}
              bgColor='#ef4444'
              labelAlignment='outside'
              isLabelVisible={false}
              baseBgColor='#E5E7EB'
              labelColor='#e80909'
              labelSize='0'
              maxCompleted={13}
              height='10px'
            />
            <span className='opacity-75 text-xs text-red-500'>
              Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses
              dengan cepat
            </span>
          </div>
        </div>
      )}
    </>
  );
};

export default Dokumen;