import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
import cityApi from '@/lib/address/api/cityApi'
import { yupResolver } from '@hookform/resolvers/yup'
import React, { useEffect, useRef, useState } 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'
import createLeadsApi from '../api/createLeadApi'

const CreateSuratDukungan = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    control,
    reset
  } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues
  })
  const [cities, setCities] = useState([])
  const [company_unit, setCompany_unit] = useState([])

  const recaptchaRef = useRef(null)

  useEffect(() => {
    const loadCities = async () => {
      let dataCities = await cityApi()
      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
      setCities(dataCities)
    }
    loadCities()
  }, [])

  const onSubmitHandler = async (values) => {
    const recaptchaValue = recaptchaRef.current.getValue()
    if (!recaptchaValue) {
      toast.error('Catcha harus diisi')
      return
    }
    const data = {
      ...values,
      name: 'Permintaan Surat Dukungan - ' + values.company,
      contact_name: values.company,
      email_from: values.email,
      phone: values.phone,
      description:
        'Nama Perusahaan : ' +
        values.company +
        ' \r\n  Alamat  : ' +
        values.address +
        ' \r\n  Npwp  : ' +
        values.npwp +
        ' \r\n  Telepon: ' +
        values.phone +
        ' \r\n  Email  : ' +
        values.email +
        ' \r\n  Pengadaan : ' +
        values.pengadaan +
        ' \r\n  Alamat 2 : ' +
        values.address2 +
        'Keterangan  : ' +
        values.description
    }

    const create_leads = await createLeadsApi({ data })
    if (create_leads) {
      toast.success('Berhasil menambahkan alamat')
      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'>Form Surat Dukungan</h1>
      <div className='w-full  p-4 bg-white border border-gray_r-6 rounded'>
        <div
          className='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4'
          role='alert'
        >
          <p>Lengkapi form berikut untuk melakukan konfirmasi pembayaran.</p>
        </div>
        <div className=' w-full md:w-[50%] p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
          <h1>Data Peserta</h1>
        </div>
        <form onSubmit={handleSubmit(onSubmitHandler)}>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
            <div>
              <label className='form-label mb-2'>Nama Perusahan *</label>
              <input
                {...register('company')}
                placeholder='PT.Indoteknik'
                type='text'
                className='form-input'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.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'>Alamat*</label>
              <input
                {...register('address')}
                placeholder='jl. Bandengan no.31 '
                type='text'
                className='form-input'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.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'>No. Telp *</label>
              <input
                {...register('phone')}
                placeholder='021-XXXX'
                type='text'
                className='form-input'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.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'>NPWP *</label>
              <input
                {...register('npwp')}
                placeholder='npwp number'
                type='text'
                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'>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='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
            <h1>Data Peserta</h1>
          </div>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
            <div>
              <label className='form-label mb-2'>Pengadaan *</label>
              <input {...register('pengadaan')} placeholder='' type='text' className='form-input' />
              <div className='text-caption-2 text-danger-500 mt-1'>{errors.pengadaan?.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'>Alamat *</label>
              <textarea
                {...register('address2')}
                placeholder=''
                type='text'
                className='form-input  h-[120px]'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>{errors.address2?.message}</div>
            </div>
          </div>
          <div className='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
            <h1>Data Produk</h1>
          </div>

          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
            <div>
              <label className='form-label mb-2'>Produk</label>
              <textarea {...register('description')} type='text' className='form-input h-[120px]' />
              <div className='text-caption-2 text-danger-500 mt-1'>
                {errors.description?.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({
  company: Yup.string().required('Harus di-isi'),
  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
  phone: Yup.string().required('Harus di-isi'),
  npwp: Yup.string().required('Harus di-isi'),
  pengadaan: Yup.string().required('Harus di-isi'),
  email: Yup.string().required('Harus di-isi'),
  address: Yup.string().required('Harus di-isi'),
  address2: Yup.string().required('Harus di-isi')
})
const defaultValues = {
  company: '',
  email: '',
  phone: '',
  pengadaan: '',
  npwp: '',
  email: '',
  address: '',
  address2: ''
}

export default CreateSuratDukungan