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 createLeadApi from '../api/createLeadApi';
import PageContent from '@/lib/content/components/PageContent';
import { useRouter } from 'next/router';

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

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

  const router = useRouter();

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

  const recaptchaRef = useRef(null);

  useEffect(() => {
    const loadState = async () => {
      let dataState = await stateApi({ tempo: false });
      dataState = dataState.map((state) => ({
        value: state.id,
        label: state.name,
      }));
      setState(dataState);
    };
    loadState();
  }, []);

  const watchState = watch('state');

  useEffect(() => {
    if (auth == false) {
      return;
    }
    const loadCities = async () => {
      setValue('city', '');
      let dataCities = await cityApi({ stateId: watchState });
      dataCities = dataCities.map((city) => ({
        value: city.id,
        label: city.name,
      }));
      setCities(dataCities);
    };
    loadCities();
  }, [auth, watchState, setValue]);

  const onSubmitHandler = async (values) => {
    const recaptchaValue = recaptchaRef.current.getValue();
    if (!recaptchaValue) {
      toast.error('Catcha harus diisi');
      return;
    }
    const data = {
      ...values,
      name: 'Pengajuan Kunjungan Service - ' + values.company,
      contact_name: values.cp,
      email_from: values.email,
      phone: values.mobile,
      description:
        '\r\n Nama Perusahaan : ' +
        values.company +
        ' \r\n  Alamat  : ' +
        values.address +
        ' \r\n  Propinsi  : ' +
        values.city +
        ' \r\n  Telepon: ' +
        values.phone +
        ' \r\n  Handphone : ' +
        values.mobile +
        ' \r\n  Email  : ' +
        values.email +
        ' \r\n Keterangan  : ' +
        values.description,
    };

    const create_leads = await createLeadApi({ 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'>
        Kunjungan Service
      </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>
            Tidak punya waktu untuk melakukan service atau perawatan rutin?
            Silahkan hubungi teknisi kami untuk melakukan kunjungan ke tempat
            Anda di Jabodetabek.
          </p>
        </div>
        <div className='w-full grid grid-cols-2 gap-x-2'>
          <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'>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'>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>
              <label className='form-label mb-2'>Provinsi*</label>
              <Controller
                name='state'
                control={control}
                render={(props) => (
                  <HookFormSelect {...props} options={state} />
                )}
              />
              <div className='text-caption-2 text-danger-500 mt-1'>
                {errors.state?.message}
              </div>
            </div>
            <div className=''>
              <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>
            <div className=''>
              <div>
                <label className='form-label mb-2'>Contact Person*</label>
                <input
                  {...register('cp')}
                  placeholder='Jhone doe'
                  type='text'
                  className='form-input'
                />
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.cp?.message}
                </div>
              </div>
            </div>
            <div className=''>
              <div>
                <label className='form-label mb-2'>No HP *</label>
                <input
                  {...register('mobile')}
                  placeholder='628XXXXXXX'
                  type='text'
                  className='form-input'
                />
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.mobile?.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=''>
              <div>
                <label className='form-label mb-2'>
                  Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan
                </label>
                <textarea
                  {...register('description')}
                  type='text'
                  className='form-input'
                />
                <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>
          <PageContent path='/kunjungan-service' />
        </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'),
  city: Yup.string().required('Harus di-isi'),
  state: Yup.string().required('Harus dipilih'),
  cp: Yup.string().required('Harus di-isi'),
  mobile: Yup.string().required('Harus di-isi'),
  email: Yup.string().required('Harus di-isi'),
  address: Yup.string().required('Harus di-isi'),
});
const defaultValues = {
  company: '',
  email: '',
  phone: '',
  city: '',
  state: '',
  cp: '',
  mobile: '',
  email: '',
  address: '',
};

export default CreateKunjunganService;