import { ContactmediaArray } from '../../data/Links';
import { Field, Form, Formik } from 'formik';
import { Button, Input } from 'antd';
import { useCreateContact } from '../../api/Contact';
import { toast } from 'react-toastify';
import { getValidationSchema } from './FormUtils';

const Contact = () => {
    const { t } = useTranslation();
    const { isLoading, mutate } = useCreateContact();

    const handelSubmit = (values: any, { resetForm }: any) => {
        mutate(
            { ...values },
            {
                onSuccess: () => {
                    toast.success(t('Your Messages Sent successfully!'));
                    resetForm();
                },
                onError: (error) => {
                    toast.error(t('An error occurred. Please try again.'));
                    console.error('Submission error:', error);
                }
            }
        );
    };
    
  return (
    <div className='contact'>
        <div className="contact_sub_container">

            <div className='header'>
                <h1>{t("Contact Us")}</h1>
                <h4>{t("Contact Us we are everywhere")}</h4>
            </div>
            <div className="body">
                <div className='contact_info'>
                    <div className="contact_details">
                        {ContactmediaArray.map((link, index) => (
                            <div><div><link.icon/></div> <span>{link.value}</span></div>
                        ))}
                    </div>
                    <div className='contact_map'>
                        <img src="/Home/Gmap.png" alt="googleMap" />
                    </div>
                </div>
                <div className='contact_form'>

                        <div className="title_container">
                            <h3>{t("Contact Sales")}</h3>
                        </div>
 
                        <Formik
                            initialValues={{ 
                                first_name: '', 
                                last_name: '', 
                                email: '', 
                                country: '', 
                                phone_number: '', 
                                message: '' 
                            }}
                            validationSchema={getValidationSchema}
                            onSubmit={handelSubmit}
                        >
                    {({ isSubmitting }) => (
                        <Form className='input_form'>
                        
                        <div>
                            <div className='input_container'>
                                <Field
                                placeholder={t('First Name')}
                                as={Input}
                                type='text'
                                id='username'
                                name='first_name'
                                className='field'
                                />
                            </div>

                            <div className='input_container'>
                                <Field
                                placeholder={t('Last Name')}
                                as={Input}
                                type='Last Name'
                                id='password'
                                name='last_name'
                                className='field'
                                />
                            </div>
                        </div>

                        <div>
                            <div className='input_container'>
                                <Field
                                placeholder={t('Email Adress')}
                                as={Input}
                                type='text'
                                id='username'
                                name='email'
                                className='field'
                                />
                            </div>
                        
                        
                            <div className='input_container'>    
                                <Field
                                placeholder={t('Phone Number')}
                                as={Input}
                                type='text'
                                id='username'
                                name='phone_number'
                                className='field'
                                />
                            </div>
                        </div>

                        <div>
                            <div className='input_container'>
                                <Field
                                placeholder={t('Country')}
                                as={Input}
                                type='text'
                                id='username'
                                name='country'
                                className='field'
                                />
                            </div>
                        
                        
                            <div className='input_container'>    
                                <Field
                                placeholder={t('Company Name')}
                                as={Input}
                                type='text'
                                id='username'
                                name='company_name'
                                className='field'
                                />
                            </div>
                        </div>

                        <div>
                            <div className='input_container text_area'>
                                <Field
                                placeholder={t('Your Message')}
                                as={Input}
                                type='text_area'
                                id='username'
                                name='message'
                                className='field'
                                />
                            </div>
                        </div>


                        <div className="button_container">
                                <Button 
                                    className='contact_button' 
                                    loading={isLoading || isSubmitting} 
                                    htmlType='submit'
                                >
                                    {t('Submit')}
                                </Button>
                        </div>

                        </Form>
                    )}

                </Formik>
                </div>
            </div>
        </div>
    </div>
  )
}

export default Contact
