import {
  ChangeEvent,
  useEffect,
  useMemo,
  useRef,
  useState,
  MouseEvent,
} from 'react';
import { useMutation } from 'react-query';
import { useRegisterStore } from '../stores/useRegisterStore';
import {
  Button,
  Checkbox,
  UseToastOptions,
  color,
  useToast,
} from '@chakra-ui/react';
import getFileBase64 from '@/core/utils/getFileBase64';
import { Controller, useForm } from 'react-hook-form';
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import odooApi from '~/libs/odooApi';
import { toast } from 'react-hot-toast';
import {
  EyeIcon,
  CheckCircleIcon,
  XCircleIcon,
} from '@heroicons/react/24/outline';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import Image from 'next/image';
import useDevice from '@/core/hooks/useDevice';
import useAuth from '@/core/hooks/useAuth';
interface FormProps {
  type: string;
  required: boolean;
  isPKP: boolean;
  chekValid: boolean;
  buttonSubmitClick: boolean;
}

interface industry_id {
  label: string;
  value: string;
  category: string;
}

interface companyType {
  value: string;
  label: string;
}
interface Auth {
  id: string;
  parentId: string;
}

const form: React.FC<FormProps> = ({
  type,
  required,
  isPKP,
  chekValid,
  buttonSubmitClick,
}) => {
  const { form, errors, updateForm, validate } = useRegisterStore();
  const { control, watch, setValue } = useForm();
  const [selectedCategory, setSelectedCategory] = useState<string>('');
  const [isChekBox, setIsChekBox] = useState<boolean>(false);
  const [isExample, setIsExample] = useState<boolean>(false);
  const { isDesktop, isMobile } = useDevice();
  // Inside your component
  const [formattedNpwp, setFormattedNpwp] = useState<string>(''); // State for formatted NPWP
  const [unformattedNpwp, setUnformattedNpwp] = useState<string>(''); // State for unformatted NPWP
  const auth = useAuth() as unknown as Auth;
  const [industries, setIndustries] = useState<industry_id[]>([]);
  const [companyTypes, setCompanyTypes] = useState<companyType[]>([]);

  const toast = useToast();
  const emailRef = useRef<HTMLInputElement>(null);
  const businessNameRef = useRef<HTMLInputElement>(null);
  const companyTypeRef = useRef<HTMLInputElement>(null);
  const industryRef = useRef<HTMLDivElement>(null);
  const addressRef = useRef<HTMLInputElement>(null);
  const namaWajibPajakRef = useRef<HTMLInputElement>(null);
  const alamatWajibPajakRef = useRef<HTMLInputElement>(null);
  const npwpRef = useRef<HTMLInputElement>(null);
  const sppkpRef = useRef<HTMLInputElement>(null);
  const docsSppkpRef = useRef<HTMLInputElement>(null);
  const docsNpwpRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const loadCompanyTypes = async () => {
      const dataCompanyTypes = await odooApi(
        'GET',
        '/api/v1/partner/company_type'
      );
      setCompanyTypes(
        dataCompanyTypes?.map((o: { id: any; name: any }) => ({
          value: o.id,
          label: o.name,
        }))
      );
      // setValue('companyType', form.company_type_id);
    };
    loadCompanyTypes();
  }, []);

  useEffect(() => {
    if (form.company_type_id) {
      setValue('companyType', parseInt(form.company_type_id));
    }
  }, [form.company_type_id]);
  useEffect(() => {
    if (form.industry_id) {
      setValue('industry_id', parseInt(form.industry_id));
    }
  }, [form.industry_id]);

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

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;

    updateForm('type_acc', 'business');
    updateForm('is_pkp', `${isPKP}`);

    // Update form dengan nilai terbaru dari input yang berubah
    updateForm(name, value);

    // Jika checkbox aktif, sinkronisasi alamat_wajib_pajak dengan alamat_bisnis
    if (isChekBox) {
      if (name === 'alamat_wajib_pajak') {
        updateForm('alamat_bisnis', value);
      } else if (name === 'alamat_bisnis') {
        updateForm('alamat_wajib_pajak', value);
      }
    }

    // Validasi setelah perubahan dilakukan
    validate();
  };

  const handleInputChangeNpwp = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    updateForm('type_acc', `business`);
    updateForm('is_pkp', `${isPKP}`);
    updateForm('npwp', value);
    validate();
  };

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setIsChekBox(!isChekBox);
  };

  const formatNpwp = (value: string) => {
    try {
      const cleaned = ('' + value).replace(/\D/g, '');
      let match;
      if (cleaned.length <= 15) {
        match = cleaned.match(
          /(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/
        );
      } else {
        match = cleaned.match(
          /(\d{0,3})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/
        );
      }

      if (match) {
        return [
          match[1],
          match[2] ? '.' : '',
          match[2],
          match[3] ? '.' : '',
          match[3],
          match[4] ? '.' : '',
          match[4],
          match[5] ? '-' : '',
          match[5],
          match[6] ? '.' : '',
          match[6],
        ].join('');
      }

      // If match is null, return the original cleaned string or handle as needed
      return cleaned;
    } catch (error) {
      // Handle error or return a default value
      console.error('Error formatting NPWP:', error);
      return value;
    }
  };

  useEffect(() => {
    if (isChekBox) {
      updateForm('isChekBox', 'true');
      updateForm('alamat_wajib_pajak', `${form.alamat_bisnis}`);
      validate();
    } else {
      updateForm('isChekBox', 'false');
      validate();
    }
  }, [isChekBox]);

  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
    const toastProps: UseToastOptions = {
      duration: 5000,
      isClosable: true,
      position: 'top',
    };

    let fileBase64 = '';
    const { name } = event.target;
    const file = event.target.files?.[0];

    // Allowed file extensions
    const allowedExtensions = ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg'];

    if (file) {
      const fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension

      // Check if the file extension is allowed
      if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
        toast({
          ...toastProps,
          title:
            'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
          status: 'error',
        });
        event.target.value = '';
        return;
      }

      // Check for file size
      if (file.size > 2000000) {
        toast({
          ...toastProps,
          title: 'Maksimal ukuran file adalah 2MB',
          status: 'error',
        });
        event.target.value = '';
        return;
      }

      // Convert file to Base64
      fileBase64 = await getFileBase64(file);
      updateForm(name, fileBase64); // Update form with the Base64 string
      validate(); // Perform form validation
    }
  };
  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);

  useEffect(() => {
    const loadIndustries = async () => {
      if (!isFormValid) {
        const options: ScrollIntoViewOptions = {
          behavior: 'smooth',
          block: 'center',
        };
        if (errors.email_partner && emailRef.current) {
          emailRef.current.scrollIntoView(options);
          return;
        }
        if (errors.company_type_id && companyTypeRef.current) {
          companyTypeRef.current.scrollIntoView(options);
          return;
        }

        if (errors.business_name && businessNameRef.current) {
          businessNameRef.current.scrollIntoView(options);
          return;
        }

        if (errors.industry_id && industryRef.current) {
          industryRef.current.scrollIntoView(options);
          return;
        }

        if (errors.alamat_bisnis && addressRef.current) {
          addressRef.current.scrollIntoView(options);
          return;
        }

        if (errors.npwp && npwpRef.current) {
          npwpRef.current.scrollIntoView(options);
          return;
        }

        if (errors.sppkp && sppkpRef.current) {
          sppkpRef.current.scrollIntoView(options);
          return;
        }
        if (errors.sppkp_document && docsSppkpRef.current) {
          docsSppkpRef.current.scrollIntoView(options);
          return;
        }
        if (errors.npwp_document && docsNpwpRef.current) {
          docsNpwpRef.current.scrollIntoView(options);
          return;
        }
      }
    };
    loadIndustries();
  }, [buttonSubmitClick, chekValid]);

  const handleCompanyTypeChange = (event: MouseEvent<HTMLDivElement>) => {
    const selectedCompanyTypeValue = watch('companyType');
    const selectedCompanyType = companyTypes.find(
      (company) => company.value === selectedCompanyTypeValue
    );

    if (selectedCompanyType !== undefined) {
      updateForm('company_type_id', `${selectedCompanyType.value}`);
      validate();
    }
  };

  const handleIndustriIdChange = (event: MouseEvent<HTMLDivElement>) => {
    const selectedIndustriIdValue = watch('industry_id');
    const selectedIndustryType = industries.find(
      (industry) => industry.value === selectedIndustriIdValue
    );
    if (selectedIndustryType) {
      updateForm('industry_id', `${selectedIndustryType?.value}`);
      setSelectedCategory(selectedIndustryType.category);
      validate();
    }
  };

  const [fileUrl, setFileUrl] = useState('');
  const [popUpNPWP, setPopUpNpwp] = useState(false);
  const [popSppkp, setPopUpSppkp] = useState(false);
  const [hasNPWP, setHasNpwp] = useState(false);
  const [hasSPPKP, setHasSPPKP] = useState(false);
  const [fileUrlSppkp, setFileUrlSppkp] = useState('');
  useEffect(() => {
    const checkUrlNPWP = async (url: string | URL | Request) => {
      try {
        const response = await odooApi(
          'GET',
          `/api/v1/user/chek/npwp/${auth?.parentId}`
        );
        return response.status; // Returns true if status is 200-299
      } catch (error) {
        console.error('Error accessing URL:', url, error);
        return false;
      }
    };
    const checkUrlSPPKP = async (url: string | URL | Request) => {
      try {
        const response = await odooApi(
          'GET',
          `/api/v1/user/chek/sppkp/${auth?.parentId}`
        );

        return response.status; // Returns true if status is 200-299
      } catch (error) {
        console.error('Error accessing URL:', url, error);
        return false;
      }
    };

    const npwpUrl = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/download/npwp/${auth?.parentId}`;
    const sppkpUrl = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/download/sppkp/${auth?.parentId}`;

    if (auth?.parentId) {
      checkUrlNPWP(npwpUrl).then((isAccessible) => {
        if (isAccessible) {
          setFileUrl(npwpUrl);
          setHasNpwp(true);
          updateForm('npwp_document', ' ');
        }
      });

      checkUrlSPPKP(sppkpUrl).then((isAccessible) => {
        if (isAccessible) {
          setFileUrlSppkp(sppkpUrl);
          setHasSPPKP(true);
          updateForm('sppkp_document', ' ');
        }
      });
    }
  }, [auth?.parentId]);

  return (
    <>
      <BottomPopup
        className='h-full object-contain object-center w-full'
        title='Dokumen NPWP'
        active={popUpNPWP}
        close={() => setPopUpNpwp(false)}
      >
        <div className='flex p-2'>
          <iframe
            src={fileUrl}
            width='800px'
            height='600px'
            title='NPWP File'
            frameBorder='0'
          ></iframe>
        </div>
      </BottomPopup>
      <BottomPopup
        className='h-full object-contain object-center w-full'
        title='Dokumen SPPKP'
        active={popSppkp}
        close={() => setPopUpSppkp(false)}
      >
        <div className='flex p-2'>
          <iframe
            src={fileUrlSppkp}
            width='800px'
            height='600px'
            title='NPWP File'
            frameBorder='0'
          ></iframe>
        </div>
      </BottomPopup>
      <BottomPopup
        className=''
        title='Contoh SPPKP'
        active={isExample}
        close={() => setIsExample(false)}
      >
        <div className='flex p-2'>
          <Image
            src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
            alt='Contoh SPPKP'
            className='w-full h-full '
            width={800}
            height={800}
            quality={85}
          />
        </div>
      </BottomPopup>
      <form
        className={` ${
          type === 'bisnis'
            ? 'mt-6 grid grid-cols-1 gap-y-4'
            : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-6 auto-rows-min'
        }`}
      >
        <div>
          <label htmlFor='email' className='font-bold'>
            Email Bisnis{' '}
            {!isPKP && !required && (
              <span className='font-normal text-gray_r-11'>(opsional)</span>
            )}
          </label>

          <input
            type='text'
            id='email_partner'
            name='email_partner'
            placeholder='example@email.com'
            value={!required ? form.email_partner : ''}
            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
              required ? 'cursor-no-drop' : ''
            }`}
            disabled={required}
            contentEditable={required}
            readOnly={required}
            onChange={handleInputChange}
            autoComplete='username'
            ref={emailRef}
            aria-invalid={
              chekValid && !required && isPKP && !!errors.email_partner
            }
          />

          {chekValid && !required && isPKP && !!errors.email_partner && (
            <span className='form-msg-danger'>{errors.email_partner}</span>
          )}
        </div>

        <div>
          <label className='font-bold' htmlFor='company'>
            Nama Bisnis
          </label>
          <div className='flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm mt-3'>
            <div
              className='w-4/5 pr-1 max-h-11 transition-all duration-500'
              ref={companyTypeRef}
              onClick={handleCompanyTypeChange}
            >
              <Controller
                name='companyType'
                control={control}
                render={(props) => (
                  <HookFormSelect
                    {...props}
                    options={companyTypes}
                    disabled={required}
                    placeholder='Badan Usaha'
                  />
                )}
              />
              {chekValid && !required && !!errors.company_type_id && (
                <span className='form-msg-danger'>
                  {errors.company_type_id}
                </span>
              )}
            </div>
            <div className='w-[120%] '>
              <input
                type='text'
                name='business_name'
                id='business_name'
                className='form-input max-h-11 transition-all duration-500'
                placeholder='Nama Perusahaan'
                autoCapitalize='true'
                value={form.business_name}
                ref={businessNameRef}
                aria-invalid={chekValid && !!errors.business_name}
                onChange={handleInputChange}
              />

              {chekValid && !!errors.business_name && (
                <span className='form-msg-danger'>{errors.business_name}</span>
              )}
            </div>
          </div>
        </div>

        <div className='mt-8 md:mt-0'>
          <label className='font-bold' htmlFor='business_name'>
            Klasifikasi Jenis Usaha
          </label>
          <div
            className='max-h-10 transition-all duration-500'
            ref={industryRef}
            onClick={handleIndustriIdChange}
          >
            <Controller
              name='industry_id'
              control={control}
              render={(props) => (
                <HookFormSelect
                  {...props}
                  options={industries}
                  disabled={required}
                  placeholder={'Select industry'}
                />
              )}
            />
          </div>
          {selectedCategory && (
            <span className='text-gray_r-11 text-xs'>
              Kategori : {selectedCategory}
            </span>
          )}
          {chekValid && !required && !!errors.industry_id && (
            <span className='form-msg-danger'>{errors.industry_id}</span>
          )}
        </div>

        <div>
          <label htmlFor='alamat_bisnis' className='font-bold'>
            Alamat Bisnis
          </label>

          <input
            type='text'
            id='alamat_bisnis'
            name='alamat_bisnis'
            placeholder='Masukan alamat bisnis anda'
            value={!required ? form.alamat_bisnis : ''}
            className={`form-input mt-3 max-h-11 transition-all duration-500 ${
              required ? 'cursor-no-drop' : ''
            }`}
            disabled={required}
            contentEditable={required}
            readOnly={required}
            ref={addressRef}
            onChange={handleInputChange}
            aria-invalid={chekValid && !required && !!errors.alamat_bisnis}
          />

          {chekValid && !required && !!errors.alamat_bisnis && (
            <span className='form-msg-danger'>{errors.alamat_bisnis}</span>
          )}
        </div>

        <div>
          <label htmlFor='nama_wajib_pajak' className='font-bold'>
            Nama Wajib Pajak{' '}
            {!isPKP && !required && (
              <span className='font-normal text-gray_r-11'>(opsional)</span>
            )}
          </label>

          <input
            type='text'
            id='nama_wajib_pajak'
            name='nama_wajib_pajak'
            placeholder='Masukan nama lengkap anda'
            value={!required ? form.nama_wajib_pajak : ''}
            className={`form-input mt-3 max-h-11 transition-all duration-500${
              required ? 'cursor-no-drop' : ''
            }`}
            disabled={required}
            contentEditable={required}
            readOnly={required}
            onChange={handleInputChange}
            ref={namaWajibPajakRef}
            aria-invalid={
              chekValid && isPKP && !required && !!errors.nama_wajib_pajak
            }
          />

          {chekValid && isPKP && !required && !!errors.nama_wajib_pajak && (
            <span className='form-msg-danger'>{errors.nama_wajib_pajak}</span>
          )}
        </div>

        <div>
          <label
            htmlFor='alamat_wajib_pajak'
            className='font-bold flex items-center'
          >
            <p>
              Alamat Wajib Pajak{' '}
              {!isPKP && !required && (
                <span className='font-normal text-gray_r-11'>(opsional)</span>
              )}
            </p>
            <div className='flex items-center ml-2 mt-1 '>
              <Checkbox
                borderColor='gray.600'
                colorScheme='red'
                size='md'
                isChecked={isChekBox}
                onChange={handleChange}
              />
              <span className='text-caption-2 ml-2 font-normal italic'>
                sama dengan alamat bisnis?
              </span>
            </div>
          </label>

          <input
            type='text'
            id='alamat_wajib_pajak'
            name='alamat_wajib_pajak'
            placeholder='Masukan alamat wajib pajak anda'
            value={
              !required
                ? isChekBox
                  ? form.alamat_bisnis
                  : form.alamat_wajib_pajak
                : ''
            }
            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
              required ? 'cursor-no-drop' : ''
            }`}
            disabled={isChekBox || required}
            contentEditable={required}
            readOnly={required}
            onChange={handleInputChange}
            ref={alamatWajibPajakRef}
            aria-invalid={
              chekValid && isPKP && !required && !!errors.alamat_wajib_pajak
            }
          />

          {chekValid && isPKP && !required && !!errors.alamat_wajib_pajak && (
            <span className='form-msg-danger'>{errors.alamat_wajib_pajak}</span>
          )}
        </div>

        <div>
          <label htmlFor='npwp' className='font-bold'>
            Nomor NPWP{' '}
            {!isPKP && !required && (
              <span className='font-normal text-gray_r-11'>(opsional)</span>
            )}
          </label>

          <input
            type='tel'
            id='npwp'
            name='npwp'
            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
              required ? 'cursor-no-drop' : ''
            }`}
            disabled={required}
            contentEditable={required}
            readOnly={required}
            ref={npwpRef}
            placeholder='000.000.000.0-000.000'
            value={
              !required
                ? formattedNpwp === ''
                  ? form.npwp
                  : formattedNpwp
                : ''
            }
            maxLength={21} // Set maximum length to 16 characters
            onChange={(e) => {
              if (!required) {
                const unformatted = e.target.value.replace(/\D/g, ''); // Remove all non-digit characters
                const formattedValue = formatNpwp(unformatted); // Format the value
                setUnformattedNpwp(unformatted); // Store unformatted value
                setFormattedNpwp(formattedValue); // Store formatted value
                handleInputChangeNpwp({
                  ...e,
                  target: { ...e.target, value: unformatted },
                }); // Update form state with unformatted value
              }
            }}
            aria-invalid={chekValid && !required && !!errors.npwp}
          />

          {chekValid && !required && !!errors.npwp && (
            <span className='form-msg-danger'>{errors.npwp}</span>
          )}
        </div>

        <div>
          <label
            htmlFor='sppkp'
            className='font-bold flex flex-row items-center justify-between'
          >
            <div className='flex flex-row items-center'>
              Nomor SPPKP{' '}
              {!required && (
                <span className='ml-2 font-normal text-gray_r-11'>
                  (opsional){' '}
                </span>
              )}
            </div>
            {
              <div
                onClick={() => setIsExample(!isExample)}
                className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
              >
                <EyeIcon className={`w-4 ${isDesktop && 'mr-2'}`} />
                {isDesktop && (
                  <p className='font-light text-xs'>Lihat Contoh</p>
                )}
              </div>
            }
          </label>

          <input
            type='tel'
            id='sppkp'
            name='sppkp'
            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
              required ? 'cursor-no-drop' : ''
            }`}
            disabled={required}
            contentEditable={required}
            readOnly={required}
            ref={sppkpRef}
            placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX'
            onChange={handleInputChange}
            value={!required ? form.sppkp : ''}
            aria-invalid={chekValid && !required && !!errors.sppkp}
          />

          {chekValid && !required && !!errors.sppkp && (
            <span className='form-msg-danger'>{errors.sppkp}</span>
          )}
        </div>

        <div>
          <label htmlFor='npwp_document' className='font-bold'>
            Dokumen NPWP{' '}
            {!isPKP && !required && (
              <span className='font-normal text-gray_r-11'>(opsional)</span>
            )}
          </label>

          <input
            type='file'
            id='npwp_document'
            name='npwp_document'
            className={`form-input transition-all duration-500 ${
              type === 'bisnis' ? '' : 'border-none'
            } mt-3 ${required ? 'cursor-no-drop' : ''}`}
            disabled={required}
            contentEditable={required}
            ref={docsNpwpRef}
            readOnly={required}
            onChange={handleFileChange}
            accept='.pdf,.png,.jpg,.jpeg' // Filter file types
          />

          {chekValid && isPKP && !required && !!errors.npwp_document && (
            <span className='form-msg-danger'>{errors.npwp_document}</span>
          )}
          <span className='form-msg-danger ml-4 text-xs mb-2'>
            Format: .pdf, .png, .jpg, atau .jpeg, Maks 2MB
          </span>
          {hasNPWP && (
            <div className='px-3'>
              <div className='inline-flex flex-row items-center justify-between w-full rounded-md h-12 bg-green-50 px-2 py-1 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20'>
                <div className='w-4/5  flex flex-row items-center justify-start '>
                  <CheckCircleIcon className='w-6 mr-2' />
                  Dokumen sudah diupload
                </div>
                <div className='w-1/5  flex flex-row  justify-end'>
                  <EyeIcon
                    onClick={() => setPopUpNpwp(true)}
                    className={`w-6 mr-2 hover:scale-110 transition-transform duration-200}`}
                  />
                  <XCircleIcon
                    onClick={() => setHasNpwp(false)}
                    className='w-6 hover:scale-110 transition-transform duration-200'
                  />
                </div>
              </div>
            </div>
          )}
        </div>
        <div>
          <label htmlFor='sppkp_document' className='font-bold'>
            Dokumen SPPKP{' '}
            {!isPKP && !required && (
              <span className='font-normal text-gray_r-11'>(opsional)</span>
            )}
          </label>

          <input
            type='file'
            id='sppkp_document'
            name='sppkp_document'
            className={`form-input transition-all duration-500 ${
              type === 'bisnis' ? '' : 'border-none'
            } mt-3 ${required ? 'cursor-no-drop' : ''}`}
            disabled={required}
            contentEditable={required}
            ref={docsSppkpRef}
            readOnly={required}
            onChange={handleFileChange}
            accept='.pdf,.png,.jpg,.jpeg'
            content='lagu.jpg'
          />
          {chekValid && isPKP && !required && !!errors.sppkp_document && (
            <span className='form-msg-danger'>{errors.sppkp_document}</span>
          )}
          <span className='form-msg-danger ml-4 text-xs mb-2'>
            Format: .pdf, .png, .jpg, atau .jpeg, Maks 2MB
          </span>
          {hasSPPKP && (
            <div className='px-3'>
              <div className='inline-flex flex-row items-center justify-between w-full rounded-md h-12 bg-green-50 px-2 py-1 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20'>
                <div className='w-4/5  flex flex-row items-center justify-start '>
                  <CheckCircleIcon className='w-6 mr-2' />
                  Dokumen sudah di upload
                </div>
                <div className='w-1/5  flex flex-row  justify-end'>
                  <EyeIcon
                    onClick={() => setPopUpSppkp(true)}
                    className={`w-6 mr-2 hover:scale-110 transition-transform duration-200}`}
                  />
                  <XCircleIcon
                    onClick={() => setHasSPPKP(false)}
                    className='w-6 hover:scale-110 transition-transform duration-200'
                  />
                </div>
              </div>
            </div>
          )}
        </div>
      </form>
    </>
  );
};

export default form;