import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
import { yupResolver } from '@hookform/resolvers/yup'
import React, { useRef } from 'react'
import ReCAPTCHA from 'react-google-recaptcha'
import { Controller, useForm } from 'react-hook-form'
import { toast } from 'react-hot-toast'
import * as Yup from 'yup'

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

  const recaptchaRef = useRef(null)

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

    const address = await createAddressApi({ data })
    if (address?.id) {
      toast.success('Berhasil menambahkan alamat')
      router.back()
    }
  }
  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  p-4 bg-white border border-gray_r-6 rounded'>
        <form onSubmit={handleSubmit(onSubmitHandler)}>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
            <div>
              <label className='form-label mb-2'>Alamat Email *</label>
              <input
                {...register('email')}
                placeholder='contoh@email.com'
                type='email'
                className='form-input'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
            </div>
          </div>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
            <div>
              <label className='form-label mb-2'>Nama Lengkap *</label>
              <input
                {...register('name')}
                placeholder='Jhon Doe'
                type='text'
                className='form-input'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div>
            </div>
          </div>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
            <div>
              <label className='form-label mb-2'>Nomor Pokok Wajib Pajak (NPWP) *</label>
              <input {...register('npwp')} type='file' className='form-input' />
              <div className='text-caption-2 text-danger-500 mt-1'>{errors.npwp?.message}</div>
            </div>
          </div>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
            <div>
              <label className='form-label mb-2'>Nomor Induk Berusaha (NIB) atau</label>
              <input {...register('nib')} type='file' className='form-input' />
            </div>
          </div>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
            <div>
              <label className='form-label mb-2'>Tanda Daftar Perusahaan (TDP) atau</label>
              <input {...register('tdp')} type='file' className='form-input' />
              {/* <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div> */}
            </div>
          </div>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
            <div>
              <label className='form-label mb-2'>Surat Izin Usaha Perdagangan (SIUP) atau</label>
              <input {...register('siup')} type='file' className='form-input' />
              {/* <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div> */}
            </div>
          </div>

          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
            <div>
              <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
            </div>
          </div>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
            <div>
              <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
                Simpan
              </button>
            </div>
          </div>
        </form>
      </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 CreatePembayaranTempo