Untitled

import TOASTMSG from '@/constants/global/toastMessages';
import toast from '@/functions/global/toast';
import { APIcontactForm } from '@/services/routes/contact/contactForm';
import { useFormik } from 'formik';
import { FC, useState } from 'react';
import * as Yup from 'yup';
import { ThreeDots } from 'react-loader-spinner';

const ContactForm: FC = (): JSX.Element => {
  // formik for form
  interface IFormik {
    fullName: string;
    email: string;
    detail: string;
  }
  const [disabledSubmitBtn, setDisabledSubmitBtn] = useState<boolean>(false);
  const formik = useFormik<IFormik>({
    initialValues: {
      fullName: '',
      email: '',
      detail: '',
    },
    validationSchema: Yup.object().shape({
      fullName: Yup.string()
        .matches(
          /^[\u0600-\u06FF\s]+$/,
          'لطفا نام و خانوادگی خود را به فارسی بنویسید!',
        )
        .min(4, 'نام و نام خانوادگی باید حداقل 4 کاراکتر باشد!')
        .max(30, 'نام و نام خانوادگی میتواند حداکثر 30 کاراکتر باشد!')
        .required('این فیلد اجباری است!'),
      email: Yup.string()
        .email('لطفا یک ایمیل معتبر وارد کنید!')
        .required('این فیلد اجباری است!'),
      detail: Yup.string()
        .min(6, 'توضیحات باید حداقل 6 کاراکتر باشد!')
        .max(400, 'توضیحات میتواند حداکثر 400 کاراکتر باشد!')
        .required('این فیلد اجباری است!'),
    }),
    onSubmit: async (values) => {
      setDisabledSubmitBtn(true);
      fetcherContactForm({
        formData: values,
      });
    },
  });

  return (
    <section className="mt-[-170px] flex flex-col items-center md:mt-0">
      <div className="flex w-[280px] flex-col items-center rounded-2xl border border-[#e3e3e3] bg-white p-5 text-[14.5px] text-[#32343b] sm:w-[350px]">
        {/* form (fullName_input, email_input, detail_input, submit) */}
        <form
          autoComplete="off"
          onSubmit={formik.handleSubmit}
          className={`flex w-full flex-col gap-3.5`}
        >
          <div className="flex flex-col space-y-1">
            <label className="pr-2">نام و نام خانوادگی *</label>
            <input
              spellCheck={false}
              disabled={disabledSubmitBtn}
              type={'text'}
              {...formik.getFieldProps('fullName')}
              className={`w-full truncate rounded-[10px] border border-[#d6d6d6] bg-white px-2.5 py-[9px] text-[13.5px] transition-all duration-300 ${
                formik.errors.fullName && formik.touched.fullName
                  ? '!border-red-400'
                  : 'focus-within:border-[#adadad]'
              }`}
            />
            {formik.errors.fullName && formik.touched.fullName ? (
              <p className="mr-1.5 pt-0.5 text-[13px] text-red-500">
                {formik.errors.fullName}
              </p>
            ) : null}
          </div>
          <div className="col-span-full lg:col-span-1">
            <div className="flex flex-col space-y-1">
              <label className="pr-2">ایمیل *</label>
              <input
                type={'text'}
                spellCheck={false}
                {...formik.getFieldProps('email')}
                className={`w-full truncate rounded-[10px] border border-[#d6d6d6] bg-white py-[9px] px-2.5 text-[13.5px] transition-all duration-300 ${
                  formik.errors.email && formik.touched.email
                    ? '!border-red-400'
                    : 'focus-within:border-[#adadad]'
                }`}
              />
              {formik.errors.email && formik.touched.email ? (
                <p className="mr-2 text-[13px] text-red-500">
                  {formik.errors.email}
                </p>
              ) : null}
            </div>
          </div>
          <div className="col-span-full lg:col-span-2">
            <div className="flex flex-col space-y-1">
              <label className="pr-2">توضیحات *</label>
              <textarea
                spellCheck={false}
                {...formik.getFieldProps('detail')}
                className={`max-h-[200px] min-h-[100px] w-full truncate rounded-[10px] border border-[#d6d6d6] bg-white px-2.5 pb-1.5 pt-2.5 text-[13.5px] outline-none transition-all duration-300 ${
                  formik.errors.detail && formik.touched.detail
                    ? '!border-red-400'
                    : 'focus-within:border-[#adadad]'
                }`}
              />
              {formik.errors.detail && formik.touched.detail ? (
                <p className="mr-2 text-[13px] text-red-500">
                  {formik.errors.detail}
                </p>
              ) : null}
            </div>
          </div>
          <button
            type="submit"
            disabled={disabledSubmitBtn}
            className={`btn-purple mt-1.5 mb-0.5 flex h-[47px] w-full items-center justify-center rounded-[10px] text-[16px] text-white sm:mt-2.5 ${
              disabledSubmitBtn ? 'opacity-90' : 'opacity-100'
            }`}
          >
            {disabledSubmitBtn ? (
              <ThreeDots width="40" radius="9" color="#fff" />
            ) : (
              'ثبت و ارسال'
            )}
          </button>
        </form>
      </div>
    </section>
  );
};

export default ContactForm;