import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import cityApi from '@/lib/address/api/cityApi';
import stateApi from '@/lib/address/api/stateApi.js';
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';

import PageContent from '@/lib/content/components/PageContent';

import useAuth from '@/core/hooks/useAuth';
import { useRouter } from 'next/router';

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

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

  const auth = useAuth();
  if (auth == false) {
    router.push(`/login?next=${encodeURIComponent('/surat-dukungan')}`);
  }

  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();
    }
  };
  if (!auth) {
    return;
  }
  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 grid grid-cols-2 gap-x-2'>
          <div className='group'>
            <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=''>
                <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=''>
                <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=''>
                <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=''>
                <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=''>
                <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=''>
                <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=''>
                <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='mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
                <h1>Data Produk</h1>
              </div>

              <div className=''>
                <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=''>
                <div>
                  <ReCAPTCHA
                    ref={recaptchaRef}
                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
                  />
                </div>
              </div>
              <div className=''>
                <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>
          <PageContent path='/surat-dukungan' />
        </div>
      </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;