import getFileBase64 from '@/core/utils/getFileBase64'
import { yupResolver } from '@hookform/resolvers/yup'
import React, { useEffect, useRef } from 'react'
import ReCAPTCHA from 'react-google-recaptcha'
import { useForm } from 'react-hook-form'
import { toast } from 'react-hot-toast'
import * as Yup from 'yup'
import createLeadApi from '../api/createLeadApi'
import PageContent from '@/lib/content/components/PageContent'
import { useRouter } from 'next/router'

import useAuth from '@/core/hooks/useAuth'


const PembayaranTempo = () => {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues
  })

  const recaptchaRef = useRef(null)
  const router = useRouter()

  const auth = useAuth()

  useEffect(() => {
    if(auth == false) {
      router.push('/login')
    }
  },[auth])

  const onSubmitHandler = async (values) => {
    const recaptchaValue = recaptchaRef.current.getValue()
    if (!recaptchaValue) {
      toast.error('Recaptcha harus diisi')
      return
    }

    const npwp = document.getElementById('npwp').files[0]
    const nib = document.getElementById('nib').files[0]
    const tdp = document.getElementById('tdp').files[0]
    const siup = document.getElementById('siup').files[0]

    const data = {
      name: 'Pengajuan Pembayaran Tempo - ' + values.name,
      contact_name: values.name,
      email_from: values.email,
      file_npwp: npwp ? await getFileBase64(npwp) : '',
      file_nib: nib ? await getFileBase64(nib) : '',
      file_tdp: tdp ? await getFileBase64(tdp) : '',
      file_siup: siup ? await getFileBase64(siup) : ''
    }

    const createLead = await createLeadApi({ data })
    if (createLead) {
      toast.success('Berhasil melakukan pengajuan pembayaran tempo')
      reset()
      recaptchaRef.current.reset()
    }
  }
  return (
    <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Pembayaran Tempo</h1>

      <div className='w-full grid grid-cols-1 md:grid-cols-2'>
        <form onSubmit={handleSubmit(onSubmitHandler)} className='grid grid-cols-1 gap-y-6'>
          <div>
            <label className='form-label mb-2'>Alamat Email*</label>
            <input
              {...register('email')}
              placeholder='contoh@email.com'
              type='email'
              className='form-input'
              aria-invalid={errors.email?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
          </div>

          <div>
            <label className='form-label mb-2'>Nama Lengkap*</label>
            <input
              {...register('name')}
              placeholder='Jhon Doe'
              type='text'
              className='form-input'
              aria-invalid={errors.name?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div>
          </div>

          <div>
            <label className='form-label mb-2'>Nomor Pokok Wajib Pajak (NPWP)*</label>
            <input
              {...register('npwp')}
              type='file'
              className='form-input'
              accept='application/pdf'
              id='npwp'
              aria-invalid={errors.npwp?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>{errors.npwp?.message}</div>
          </div>

          <div>
            <label className='form-label mb-2'>Nomor Induk Berusaha (NIB) atau</label>
            <input
              {...register('nib')}
              type='file'
              className='form-input'
              accept='application/pdf'
              id='nib'
              placeholder='Hello'
            />
          </div>

          <div>
            <label className='form-label mb-2'>Tanda Daftar Perusahaan (TDP) atau</label>
            <input
              {...register('tdp')}
              type='file'
              className='form-input'
              accept='application/pdf'
              id='tdp'
            />
          </div>

          <div>
            <label className='form-label mb-2'>Surat Izin Usaha Perdagangan (SIUP)</label>
            <input
              {...register('siup')}
              type='file'
              className='form-input'
              accept='application/pdf'
              id='siup'
            />
          </div>

          <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />

          <button type='submit' className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'>
            Simpan
          </button>

          <div></div>
        </form>
        <PageContent path='/pembayaran-tempo' />
      </div>
    </div>
  )
}
const validationSchema = Yup.object().shape({
  name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'),
  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
  npwp: Yup.string().required('Harus di-isi')
})
const defaultValues = {
  name: '',
  email: '',
  npwp: '',
  siup: '',
  tdp: '',
  nib: ''
}

export default PembayaranTempo