'use client';

import s from './styles.module.scss';
import { Button, Input } from '@shared/ui';
import Image from 'next/image';
import toast from 'react-hot-toast';

import bgForm from '@public/images/bg-form.jpg';
import { z } from 'zod';
import { Controller, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const FormSchema = z.object({
  name: z.string().min(3),
  phone: z.string(),
});
type TForm = z.infer<typeof FormSchema>;

const defaultValues = {
  name: '',
  phone: '',
};

export default function LicenseForm() {
  const {
    handleSubmit,
    control,
    reset,
    formState: { errors },
    clearErrors,
  } = useForm<TForm>({
    mode: 'onSubmit',
    reValidateMode: 'onBlur',
    resolver: zodResolver(FormSchema),
    defaultValues,
  });

  const onSubmit = async (data: TForm) => {
    try {
      console.log('Form', data);
      toast.success('Заявка на консультацию принята');
      reset(defaultValues);
    } catch (e) {
      toast.error('Ошибка при отправке заявки...', {
        duration: 3000,
      });
    }
  };

  return (
    <div className={s.Form}>
      <div className={s.Offer}>
        <Image
          className={s.Background}
          src={bgForm}
          placeholder='blur'
          alt={''}
          quality={75}
          fill
          priority
        />
        <h3 className={s.Title}>
          Заключите договор до 1 июля и получите скидку на проведение пожарной
          экспертизы 15 %
        </h3>
        <p className={s.SubTitle}>
          Оставьте свои контактные данные и мы закрепим скидку до 1 июля за вами
        </p>
      </div>
      <form className={s.Inputs} onSubmit={handleSubmit(onSubmit)}>
        <Controller
          control={control}
          name={'name'}
          render={({ field }) => (
            <Input {...field} placeholder={'Ваше имя'} fullWidth />
          )}
        />
        <Controller
          control={control}
          name={'phone'}
          render={({ field }) => (
            <Input {...field} placeholder={'+7 (999) 123 45 67'} fullWidth />
          )}
        />
        <Button variant='orange' fullWidth>
          Получить консультацию
        </Button>
      </form>
    </div>
  );
}