'use client';

import s from './styles.module.scss';
import { Button, Input } from '@/shared/ui';
import { PhoneInput, TextArea } from '@shared/ui';
import { z } from 'zod';
import { isValidPhoneNumber } from 'libphonenumber-js/min';
import { Controller, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { sendFormFn } from '@shared/api/api.service';
import toast from 'react-hot-toast';
import { ModalContent } from '@shared/ui/modal/modal-content';
import { useModal } from '@core/providers/modal-provider';
import Link from 'next/link';

const FormSchema = z.object({
  name: z
    .string()
    .min(3, { message: 'Поле должно содержать не менее 3-х букв' })
    .regex(/^[A-Za-zА-Яа-яЁё]+(?:[ '-][A-Za-zА-Яа-яЁё]+)*$/, {
      message: 'Поле содержит некорректные символы',
    }),
  phone: z.string().refine(isValidPhoneNumber, 'Некорректный номер телефона'),
  message: z
    .string()
    .min(21, { message: 'Оставьте сообщение мин. 20 символов' }),
});
type TForm = z.infer<typeof FormSchema>;

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

type ConsultationModalProps = {
  pageName?: string;
};

function ConsultationModal({
  pageName = 'noname-modal',
}: ConsultationModalProps) {
  const {
    handleSubmit,
    control,
    reset,
    clearErrors,
    formState: { errors },
  } = useForm<TForm>({
    resolver: zodResolver(FormSchema),
    defaultValues,
  });

  const modal = useModal();

  const handlePolicyClick = () => modal.hideModal();

  const onSubmit = async (data: TForm) => {
    const payload = {
      ...data,
      form: pageName,
    };

    try {
      await sendFormFn(payload);
      toast.success('Заявка на консультацию принята');
    } catch (e) {
      toast.error('Ошибка при отправке заявки...', {
        duration: 3000,
      });
    } finally {
      modal.hideModal();
      reset(defaultValues);
    }
  };

  return (
    <ModalContent closeByClickOutside>
      <form
        className={s.Form}
        id='consultation-modal-form'
        onSubmit={handleSubmit(onSubmit)}
      >
        <h2 className={s.Title}>
          Мы подскажем, как решить ваши вопросы по экспертизе или оценке.
        </h2>
        <Controller
          control={control}
          name={'name'}
          render={({ field }) => (
            <Input
              {...field}
              placeholder={'Ваше имя'}
              fullWidth
              onChange={(e) => {
                clearErrors('name');
                field.onChange(e);
              }}
              error={errors && errors.name?.message}
            />
          )}
        />
        <Controller
          control={control}
          name={'phone'}
          render={({ field }) => (
            <PhoneInput
              {...field}
              placeholder={'+7 (999) 123-45-67'}
              fullWidth
              onChange={(e) => {
                clearErrors('phone');
                field.onChange(e);
              }}
              error={errors && errors.phone?.message}
            />
          )}
        />
        <p className={s.Description}>Кратко опишите интересующий Вас вопрос</p>
        <Controller
          control={control}
          name={'message'}
          render={({ field }) => (
            <TextArea
              {...field}
              placeholder={''}
              fullWidth
              id='story'
              name='story'
              rows={6}
              error={errors && errors.message?.message}
              errorTextColor={'#ff9191'}
            />
          )}
        />
        <span className={s.Agreement}>
          Нажимая на кнопку, вы даете согласие на обработку своих персональных
          данных и соглашаетесь с{' '}
          <Link href={'/privacy-policy'} onClick={handlePolicyClick}>
            Политикой конфиденциальности
          </Link>
        </span>
        <Button className={s.SendBtn} variant='green'>
          Отправить
        </Button>
      </form>
    </ModalContent>
  );
}

export { ConsultationModal };
