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 Image from 'next/image';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import { EyeIcon } from '@heroicons/react/24/outline';
import useDevice from '@/core/hooks/useDevice';
const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
  const { control, watch } = useForm();
  const [isExample, setIsExample] = useState(false);
  const { isDesktop, isMobile } = useDevice();
  const [base64, setBase64] = useState();
  const [pdfData, setPdfData] = useState();
  const [format, setFormat] = useState();
  const [popUpSource, setSource] = useState();
  const {
    formDokumen,
    errorsDokumen,
    validateDokumen,
    updateFormDokumen,
    getJumlahDokumenDiisi,
  } = usePengajuanTempoStoreDokumen();

  const handleConfirmSubmit = (format, base64) => {
    if (format == 'pdf') {
      setFormat(`application/${format}`);
    } else {
      setFormat(`image/${format}`);
    }
    setBase64(
      base64.trim().replace(/^"+/, '').replace(/"+$/, '').replaceAll('\\', '')
    );
    setIsExample(!isExample);
  };
  const handleInputChange = async (event) => {
    let fileBase64 = '';
    const { name } = event.target;
    const file = event.target.files?.[0];
    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]);

  return (
    <>
      {isDesktop && (
        <div>
          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
            Dokumen
          </h1>
          <form className='flex flex-col w-full gap-5'>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  NIB (SIUP/TDP/SKDP)
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenNib?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenNib'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenNib'
                      name='dokumenNib'
                      type='file'
                      title=' '
                      ref={dokumenNibRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenNib}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenNib.format,
                          formDokumen.dokumenNib.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenNib}
                  </div>
                )}
              </div>
            </div>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  NPWP Perusahaan
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenNpwp?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenNpwp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenNpwp'
                      name='dokumenNpwp'
                      type='file'
                      title=' '
                      ref={dokumenNpwpRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenNpwp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenNpwp.format,
                          formDokumen.dokumenNpwp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenNpwp}
                  </div>
                )}
              </div>
            </div>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>SPPKP</label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenSppkp?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenSppkp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenSppkp'
                      name='dokumenSppkp'
                      type='file'
                      title=' '
                      ref={dokumenSppkpRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenSppkp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenSppkp.format,
                          formDokumen.dokumenSppkp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSppkp}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  {' '}
                  Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenAktaPerubahan?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenAktaPerubahan'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenAktaPerubahan'
                      name='dokumendokumenAktaPerubahanSppkp'
                      type='file'
                      title=' '
                      ref={dokumenAktaPerubahanRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenAktaPerubahan}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenAktaPerubahan.format,
                          formDokumen.dokumenAktaPerubahan.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenAktaPerubahan}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  KTP Dirut/Direktur{' '}
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenKtpDirut?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenKtpDirut'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenKtpDirut'
                      name='dokumenKtpDirut'
                      type='file'
                      title=' '
                      ref={dokumenKtpDirutRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenKtpDirut}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenKtpDirut.format,
                          formDokumen.dokumenKtpDirut.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenKtpDirut}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  Akta Pendirian <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenAktaPendirian?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenAktaPendirian'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenAktaPendirian'
                      name='dokumenAktaPendirian'
                      type='file'
                      title=' '
                      ref={dokumenAktaPendirianRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenAktaPendirian}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenAktaPendirian.format,
                          formDokumen.dokumenAktaPendirian.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenAktaPendirian}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  Laporan Keuangan
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenLaporanKeuangan?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenLaporanKeuangan'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenLaporanKeuangan'
                      name='dokumenLaporanKeuangan'
                      type='file'
                      title=' '
                      ref={dokumenLaporanKeuanganRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenLaporanKeuangan.format,
                          formDokumen.dokumenLaporanKeuangan.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenLaporanKeuangan}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  Foto Kantor (Tampak Depan)
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenFotoKantor?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenFotoKantor'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenFotoKantor'
                      name='dokumenFotoKantor'
                      type='file'
                      title=' '
                      ref={dokumenFotoKantorRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenFotoKantor}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenFotoKantor.format,
                          formDokumen.dokumenFotoKantor.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenFotoKantor}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  Tempat Bekerja
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenTempatBekerja?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenTempatBekerja'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenTempatBekerja'
                      name='dokumenTempatBekerja'
                      type='file'
                      title=' '
                      ref={dokumenTempatBekerjaRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenTempatBekerja}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenTempatBekerja.format,
                          formDokumen.dokumenTempatBekerja.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                  {/* <Image
                src={`data:image/png;base64, ${formDokumen.dokumenNib.base64}`}
                alt='Contoh SPPKP'
                className='w-full h-full '
                width={800}
                height={800}
                quality={85}
              /> */}
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenTempatBekerja}
                  </div>
                )}
              </div>
            </div>
          </form>
        </div>
      )}
      {isMobile && (
        <div>
          <h1 className={`font-bold ${isKonfirmasi ? 'hidden' : 'text-xl'}`}>
            Dokumen
          </h1>
          <form className='flex flex-col w-full gap-5 text-sm'>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  NIB (SIUP/TDP/SKDP)
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-center justify-start'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenNib?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenNib'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenNib'
                      name='dokumenNib'
                      type='file'
                      title=' '
                      ref={dokumenNibRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenNib}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenNib.format,
                          formDokumen.dokumenNib.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenNib}
                  </div>
                )}
              </div>
            </div>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>NPWP Perusahaan</label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenNpwp?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenNpwp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenNpwp'
                      name='dokumenNpwp'
                      type='file'
                      title=' '
                      ref={dokumenNpwpRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenNpwp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenNpwp.format,
                          formDokumen.dokumenNpwp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenNpwp}
                  </div>
                )}
              </div>
            </div>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>SPPKP</label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenSppkp?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenSppkp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenSppkp'
                      name='dokumenSppkp'
                      type='file'
                      title=' '
                      ref={dokumenSppkpRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenSppkp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenSppkp.format,
                          formDokumen.dokumenSppkp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSppkp}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  {' '}
                  Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenAktaPerubahan?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenAktaPerubahan'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenAktaPerubahan'
                      name='dokumendokumenAktaPerubahanSppkp'
                      type='file'
                      title=' '
                      ref={dokumenAktaPerubahanRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenAktaPerubahan}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenAktaPerubahan.format,
                          formDokumen.dokumenAktaPerubahan.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenAktaPerubahan}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  KTP Dirut/Direktur{' '}
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenKtpDirut?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenKtpDirut'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenKtpDirut'
                      name='dokumenKtpDirut'
                      type='file'
                      title=' '
                      ref={dokumenKtpDirutRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenKtpDirut}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenKtpDirut.format,
                          formDokumen.dokumenKtpDirut.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenKtpDirut}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  Akta Pendirian <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenAktaPendirian?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenAktaPendirian'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenAktaPendirian'
                      name='dokumenAktaPendirian'
                      type='file'
                      title=' '
                      ref={dokumenAktaPendirianRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenAktaPendirian}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenAktaPendirian.format,
                          formDokumen.dokumenAktaPendirian.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenAktaPendirian}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  Laporan Keuangan
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenLaporanKeuangan?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenLaporanKeuangan'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenLaporanKeuangan'
                      name='dokumenLaporanKeuangan'
                      type='file'
                      title=' '
                      ref={dokumenLaporanKeuanganRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenLaporanKeuangan.format,
                          formDokumen.dokumenLaporanKeuangan.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenLaporanKeuangan}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  Foto Kantor (Tampak Depan)
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenFotoKantor?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenFotoKantor'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenFotoKantor'
                      name='dokumenFotoKantor'
                      type='file'
                      title=' '
                      ref={dokumenFotoKantorRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenFotoKantor}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenFotoKantor.format,
                          formDokumen.dokumenFotoKantor.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenFotoKantor}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>Tempat Bekerja</label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenTempatBekerja?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenTempatBekerja'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
                    >
                      Ubah
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenTempatBekerja'
                      name='dokumenTempatBekerja'
                      type='file'
                      title=' '
                      ref={dokumenTempatBekerjaRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenTempatBekerja}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenTempatBekerja.format,
                          formDokumen.dokumenTempatBekerja.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                  {/* <Image
               src={`data:image/png;base64, ${formDokumen.dokumenNib.base64}`}
               alt='Contoh SPPKP'
               className='w-full h-full '
               width={800}
               height={800}
               quality={85}
             /> */}
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenTempatBekerja}
                  </div>
                )}
              </div>
            </div>
          </form>
        </div>
      )}
      {isDesktop && (
        <BottomPopup
          className='!container'
          title='Dokumen'
          active={isExample}
          close={() => setIsExample(false)}
        >
          <div className='flex  justify-center items-center p-2'>
            {/* <embed
              src={`data:${format};base64,${base64}`}
              type={format}
              width='100%'
              height='600px'
            /> */}
            <iframe
              src={`data:${format};base64,${base64}`}
              width='100%'
              height='100%'
              title='Document'
            ></iframe>
          </div>
        </BottomPopup>
      )}
      {isMobile && (
        <BottomPopup
          className='!container'
          title='Dokumen'
          active={isExample}
          close={() => setIsExample(false)}
        >
          <div className='flex  justify-center items-center p-2'>
            {/* <embed
              src={`data:${format};base64,${base64}`}
              type={format}
              width='100%'
              height='100%'
            /> */}
            <object
              data={`data:${format};base64,${base64}`}
              type={format}
              width='100%'
              height='100%'
              onError={(e) => {
                // Jika <object> gagal menampilkan PDF, unduh otomatis
                const link = document.createElement('a');
                link.href = `data:${format};base64,${base64}`;
                link.download = 'document.pdf';
                link.click();
              }}
            >
              PDF tidak dapat ditampilkan.
              <a
                href={`data:${format};base64,${base64}`}
                download='document.pdf'
              >
                {' '}
                Klik <span className='text-red-500'>di sini</span> untuk
                mengunduh PDF
              </a>
            </object>
          </div>
        </BottomPopup>
      )}
    </>
  );
};

export default KonfirmasiDokumen;

{
  /* <iframe
  src={`data:application/octet-stream;base64, ${base64}`}
  // src={`data:application/${format};base64, ${base64}`}
  width='800px'
  height='600px'
  title='NPWP File'
  frameBorder='0'
  sandbox
></iframe> */
}
{
  /* <Image
  src={`data:image/${format};base64, ${base64}`}
  alt='Contoh SPPKP'
  className='w-full h-full '
  width={1200}
  height={1200}
  quality={85}
/> */
}
