import { FC } from 'react'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
import Input from '../../components/Input'
import CreateSidebar from './components/CreateSidebar'
import { useTranslation } from 'react-i18next'
import { useFormik } from 'formik'
import * as Yup from 'yup'

const CreateCompany: FC = () => {
    const { t } = useTranslation('global')

    const formik = useFormik({
        initialValues: {
            name: '',
            ceoFirstName: '',
            ceoLastName: '',
            phoneNumber: '',
            email: '',
            nationalId: '',
            establishmentDate: '',
            address: '',
            mapLink: '',
            shortDescription: ''
        },
        validationSchema: Yup.object({
            name: Yup.string().required(t('errors.required')),
            ceoFirstName: Yup.string().required(t('errors.required')),
            ceoLastName: Yup.string().required(t('errors.required')),
            phoneNumber: Yup.string().required(t('errors.required')),
            email: Yup.string().email(t('errors.invalid_email')).required(t('errors.required')),
            nationalId: Yup.string().required(t('errors.required')),
            establishmentDate: Yup.string().required(t('errors.required')),
            address: Yup.string().required(t('errors.required')),
            mapLink: Yup.string().url(t('errors.invalid_url')),
            shortDescription: Yup.string().required(t('errors.required'))
        }),
        onSubmit: (values) => {
            console.log(values)
        }
    })

    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div>
                    افزودن شرکت
                </div>

                <Button
                    className='w-fit px-4'
                    onClick={() => formik.handleSubmit()}
                >
                    <div className='flex items-center gap-2'>
                        <TickCircle size={20} color='white' />
                        <div>ثبت شرکت</div>
                    </div>
                </Button>
            </div>

            <div className='flex gap-6'>
                <div className='flex-1'>
                    <div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                        <div>اطلاعات شرکت</div>

                        <div className='rowTwoInput mt-6'>
                            <Input
                                label={t('company.company_name')}
                                name='name'
                                value={formik.values.name}
                                onChange={formik.handleChange}
                                error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
                            />
                            <Input
                                label={t('company.ceo_first_name')}
                                name='ceoFirstName'
                                value={formik.values.ceoFirstName}
                                onChange={formik.handleChange}
                                error_text={formik.touched.ceoFirstName && formik.errors.ceoFirstName ? formik.errors.ceoFirstName : ''}
                            />
                        </div>

                        <div className='rowTwoInput mt-6'>
                            <Input
                                label={t('company.ceo_last_name')}
                                name='ceoLastName'
                                value={formik.values.ceoLastName}
                                onChange={formik.handleChange}
                                error_text={formik.touched.ceoLastName && formik.errors.ceoLastName ? formik.errors.ceoLastName : ''}
                            />
                            <Input
                                label={t('company.phone_number')}
                                name='phoneNumber'
                                value={formik.values.phoneNumber}
                                onChange={formik.handleChange}
                                error_text={formik.touched.phoneNumber && formik.errors.phoneNumber ? formik.errors.phoneNumber : ''}
                            />
                        </div>

                        <div className='rowTwoInput mt-6'>
                            <Input
                                label={t('company.email')}
                                name='email'
                                value={formik.values.email}
                                onChange={formik.handleChange}
                                error_text={formik.touched.email && formik.errors.email ? formik.errors.email : ''}
                            />
                            <Input
                                label={t('company.national_id')}
                                name='nationalId'
                                value={formik.values.nationalId}
                                onChange={formik.handleChange}
                                error_text={formik.touched.nationalId && formik.errors.nationalId ? formik.errors.nationalId : ''}
                            />
                        </div>

                        <div className='rowTwoInput mt-6'>
                            <Input
                                label={t('company.establishment_date')}
                                name='establishmentDate'
                                value={formik.values.establishmentDate}
                                onChange={formik.handleChange}
                                error_text={formik.touched.establishmentDate && formik.errors.establishmentDate ? formik.errors.establishmentDate : ''}
                            />
                            <Input
                                label={t('company.map_link')}
                                name='mapLink'
                                value={formik.values.mapLink}
                                onChange={formik.handleChange}
                                error_text={formik.touched.mapLink && formik.errors.mapLink ? formik.errors.mapLink : ''}
                            />
                        </div>

                        <div className='mt-6'>
                            <Input
                                label={t('company.address')}
                                name='address'
                                value={formik.values.address}
                                onChange={formik.handleChange}
                                error_text={formik.touched.address && formik.errors.address ? formik.errors.address : ''}
                            />
                        </div>

                        <div className='mt-6'>
                            <Input
                                label={t('company.short_description')}
                                name='shortDescription'
                                value={formik.values.shortDescription}
                                onChange={formik.handleChange}
                                error_text={formik.touched.shortDescription && formik.errors.shortDescription ? formik.errors.shortDescription : ''}
                            />
                        </div>
                    </div>
                </div>

                <CreateSidebar />
            </div>
        </div>
    )
}

export default CreateCompany