import odooApi from '@/core/api/odooApi'
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 createLeadApi from '../api/createLeadApi'
import PageContent from '@/lib/content/components/PageContent'

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

const KunjunganSales = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    control,
    reset
  } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues
  })
  const [cities, setCities] = useState([])
  const [companyTypes, setCompanyTypes] = useState([])
  const router = useRouter()

  const auth = useAuth()

  

  const recaptchaRef = useRef(null)

  useEffect(() => {
    if(auth == false) {
      router.push('/login')
    }
    const loadCities = async () => {
      let dataCities = await cityApi()
      dataCities = dataCities.map((obj) => ({ value: obj.name, label: obj.name }))
      setCities(dataCities)
    }
    const loadCompanyTypes = async () => {
      const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type')
      setCompanyTypes(dataCompanyTypes?.map((obj) => ({ value: obj.name, label: obj.name })))
    }

    loadCompanyTypes()
    loadCities()
  }, [auth])

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

    const data = {
      name: `Pengajuan Kunjungan Sales - ${values.company}`,
      email_from: values.email,
      phone: values.phone,
      description: [
        `Nama Perusahaan: ${values.company}`,
        `No. Telepon: ${values.phone}`,
        `Alamat Lengkap: ${values.address}`,
        `Kota: ${values.city}`,
        `Unit Perusahaan: ${values.companyType}`,
        `No. Handphone: ${values.mobile}`,
        `Alamat Email: ${values.email}`,
        `Keterangan: ${values.description}`
      ].join('\n')
    }

    const createLead = await createLeadApi({ data })
    if (createLead) {
      toast.success('Berhasil mengirimkan formulir kunjungan sales')
      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'>Kunjungan Sales</h1>

      <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-x-2'>
        <form onSubmit={handleSubmit(onSubmitHandler)} className='grid grid-cols-1 gap-y-6'>
          <div
            className='flex items-center bg-blue-100 border border-blue-300 text-blue-500 font-medium px-4 py-3 rounded leading-6'
            role='alert'
          >
            Hubungi kami untuk mendapatkan kunjungan sales kami dan dapatkan berbagai kelebihannya
            dengan menjadi pelanggan korporat kami.
          </div>
          <div>
            <label className='form-label mb-2'>Nama Perusahan*</label>
            <input
              {...register('company')}
              placeholder='PT. Indoteknik Dotcom Gemilang'
              type='text'
              className='form-input'
              aria-invalid={errors.company?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
          </div>

          <div>
            <label className='form-label mb-2'>No. Telepon*</label>
            <input
              {...register('phone')}
              placeholder='021XXXXXXX'
              type='text'
              className='form-input'
              aria-invalid={errors.phone?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
          </div>

          <div>
            <label className='form-label mb-2'>Alamat Lengkap*</label>
            <input
              {...register('address')}
              placeholder='Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan, Jakarta Utara'
              type='text'
              className='form-input'
              aria-invalid={errors.address?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.message}</div>
          </div>

          <div>
            <label className='form-label mb-2'>Kota*</label>
            <Controller
              name='city'
              control={control}
              render={(props) => <HookFormSelect {...props} options={cities} />}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
          </div>

          <div>
            <label className='form-label mb-2'>Unit Perusahaan</label>
            <Controller
              name='companyType'
              control={control}
              render={(props) => <HookFormSelect {...props} options={companyTypes} />}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>{errors.companyType?.message}</div>
          </div>

          <div>
            <label className='form-label mb-2'>No. Handphone*</label>
            <input
              {...register('mobile')}
              placeholder='628XXXXXXX'
              type='text'
              className='form-input'
              aria-invalid={errors.mobile?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
          </div>

          <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'>Keterangan</label>
            <textarea {...register('description')} type='text' className='form-input' />
          </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>
        </form>
        <PageContent path='/kunjungan-sales' />
      </div>
    </div>
  )
}

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
  company: Yup.string().required('Harus di-isi'),
  phone: Yup.string().required('Harus di-isi'),
  mobile: Yup.string().required('Harus di-isi'),
  address: Yup.string().required('Harus di-isi'),
  city: Yup.string().required('Harus dipilih')
})

const defaultValues = {
  email: '',
  company: '',
  phone: '',
  mobile: '',
  address: '',
  city: '',
  companyType: '',
  description: ''
}

export default KunjunganSales