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;