'use client'
import Button from '@/components/Button'
import Input from '@/components/Input'
import Textarea from '@/components/Textarea'
import { CallCalling, Location, SmsTracking } from 'iconsax-react'
import React from 'react'
import { CreateContactType } from './types/ContactTypes'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useCreateContact } from './hooks/useContactData'
import { ErrorType } from '@/helpers/types'
import { toast } from '@/components/Toast'

const ContactForm = () => {

    const createContact = useCreateContact()

    const formik = useFormik<CreateContactType>({
        initialValues: {
            fullName: '',
            email: '',
            phone: '',
            businessName: '',
            content: '',
        },
        validationSchema: Yup.object({
            fullName: Yup.string().required('نام وارد کنید'),
            email: Yup.string().email('ایمیل معتبر وارد کنید').required('ایمیل وارد کنید'),
            phone: Yup.string().required('شماره تماس وارد کنید'),
            businessName: Yup.string().required('نام شرکت وارد کنید'),
            content: Yup.string().required('پیام وارد کنید'),
        }),
        onSubmit: (values) => {
            createContact.mutate(values, {
                onSuccess: () => {
                    toast('پیام شما با موفقیت ثبت شد', 'success')
                    formik.resetForm()
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error.message[0] || 'An error occurred', 'error')
                }
            })
        },
    })
    return (
        <div className='mt-24 max-w-maxWidth mx-auto'>
            <h1 className='text-2xl font-bold'>
                تماس با ما
            </h1>

            <div className='flex xl:flex-row flex-col gap-24 mt-14 items-center'>
                <div className='xl:max-w-[300px]'>
                    <div className='font-bold text-lg'>
                        شماره تماس
                    </div>
                    <div className='flex gap-4 mt-4 items-center'>
                        <CallCalling
                            size={24}
                            color='black'
                        />
                        <div className='text-sm'>
                            ۰۲۱-۹۱۶۹۳۵۳۳
                        </div>
                    </div>

                    <div className='font-bold text-lg mt-8'>
                        ایمیل
                    </div>
                    <div className='flex gap-4 mt-4 items-center'>
                        <SmsTracking
                            size={24}
                            color='black'
                        />
                        <div className='text-sm'>
                            info@danakcorp.com
                        </div>
                    </div>

                    <div className='font-bold text-lg mt-8'>
                        آدرس
                    </div>
                    <div className='flex gap-4 mt-4 items-center'>
                        <Location
                            size={24}
                            color='black'
                        />
                        <div className='text-sm'>
                            تهران - یوسف آباد - فتحی شقاقی - پلاک ۵ - واحد ۱۳
                        </div>
                    </div>
                </div>

                <div className='flex-1 w-full  bg-[#F1F3F8] rounded-4xl xl:p-10 p-5 border-2 border-white'>
                    <div className='text-lg font-bold'>
                        فرم تماس
                    </div>

                    <div className='rowTwoInput mt-8'>
                        <Input
                            placeholder='نام و نام خانوادگی'
                            {...formik.getFieldProps('fullName')}
                            error_text={formik.touched.fullName && formik.errors.fullName ? formik.errors.fullName : undefined}
                            className='border-t-0 border-x-0 rounded-none place-black'
                        />
                        <Input
                            placeholder='نام شرکت '
                            {...formik.getFieldProps('businessName')}
                            error_text={formik.touched.businessName && formik.errors.businessName ? formik.errors.businessName : undefined}
                            className='border-t-0 border-x-0 rounded-none place-black'
                        />
                    </div>
                    <div className='rowTwoInput mt-8'>
                        <Input
                            placeholder='شماره تماس'
                            {...formik.getFieldProps('phone')}
                            error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : undefined}
                            className='border-t-0 border-x-0 rounded-none place-black'
                        />
                        <Input
                            placeholder='ایمیل'
                            {...formik.getFieldProps('email')}
                            error_text={formik.touched.email && formik.errors.email ? formik.errors.email : undefined}
                            className='border-t-0 border-x-0 rounded-none place-black'
                        />
                    </div>

                    <div className='mt-8'>
                        <Textarea
                            placeholder='پیام'
                            {...formik.getFieldProps('content')}
                            error_text={formik.touched.content && formik.errors.content ? formik.errors.content : undefined}
                            className='border-t-0 border-x-0 place-black rounded-none min-h-[40px]'
                        />
                    </div>

                    <div className='mt-8 flex justify-end'>
                        <Button
                            label='ارسال'
                            className='w-fit px-8'
                            onClick={() => formik.handleSubmit()}
                            isLoading={createContact.isPending}
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ContactForm