import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import UploadBoxDraggble from '../../components/UploadBoxDraggble';
import Button from '../../components/Button';
import { TickCircle } from 'iconsax-react';
import DatePickerComponent from '../../components/DatePicker';
import Select from '../../components/Select';
import * as Yup from 'yup'
import { useFormik } from 'formik';
import { CreateCustomerType, ProvinesItemType } from './types/CustomerTypes';
import { useCreateCustomer, useGetCities, useGetProvines } from './hooks/useCustomerData';
import PageLoading from '../../components/PageLoading';
import { toast } from 'react-toastify';
import { ErrorType } from '../../helpers/types';
import { useSingleUpload } from '../service/hooks/useServiceData';
import { useNavigate } from 'react-router-dom';
import { Pages } from '../../config/Pages';
import Textarea from '../../components/Textarea';

const AddCustomer: FC = () => {

    const { t } = useTranslation('global')
    const navigate = useNavigate()
    const [provinesId, setProvinesId] = useState<string>('')
    const [file, setFile] = useState<File>()
    const getProvines = useGetProvines()
    const getCities = useGetCities(provinesId)
    const singleUpload = useSingleUpload()
    const createCustomer = useCreateCustomer()

    const handleCreateCustomer = (values: CreateCustomerType) => {
        createCustomer.mutate(values, {
            onSuccess: () => {
                toast.success(t('success'))
                navigate(Pages.customer.list)
            },
            onError: (error: ErrorType) => {
                toast.error(error.response?.data?.error.message[0])
            }
        })
    }




    const formik = useFormik<CreateCustomerType>({
        initialValues: {
            phone: '',
            firstName: '',
            lastName: '',
            email: '',
            birthDate: '',
            nationalCode: '',
            password: '',
            economicCode: '',
            registrationName: '',
            registrationCode: '',
            nationalIdentity: '',
            postalCode: '',
            address: '',
            cityId: '',
            profilePic: ''
        },
        validationSchema: Yup.object({
            phone: Yup.string().required(t('errors.required')),
            firstName: Yup.string().required(t('errors.required')),
            lastName: Yup.string().required(t('errors.required')),
            email: Yup.string().email(t('errors.email')).required(t('errors.required')),
            birthDate: Yup.string().required(t('errors.required')),
            nationalCode: Yup.string().required(t('errors.required')),
            password: Yup.string().required(t('errors.required')),
            economicCode: Yup.string().required(t('errors.required')),
            registrationName: Yup.string().required(t('errors.required')),
            registrationCode: Yup.string().required(t('errors.required')),
            nationalIdentity: Yup.string().required(t('errors.required')),
            postalCode: Yup.string().required(t('errors.required')),
            address: Yup.string().required(t('errors.required')),
            cityId: Yup.string().required(t('errors.required')),
        }),
        onSubmit: async (values) => {
            values.cityId = +values.cityId
            if (file) {
                const formData = new FormData()
                formData.append('file', file)
                await singleUpload.mutateAsync(formData, {
                    onSuccess: (data) => {
                        values.profilePic = data?.data?.url
                    },
                    onError: (error: ErrorType) => {
                        toast.error(error.response?.data?.error?.message[0])
                    }
                })

                handleCreateCustomer(values)
            } else {
                values.profilePic = undefined
                handleCreateCustomer(values)
            }
        }
    })

    return (
        <div className='w-full mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('customer.add_cutomer')}
                </div>
                <div>
                    <Button
                        className='px-5'
                        onClick={() => formik.handleSubmit()}
                        isLoading={createCustomer.isPending || singleUpload.isPending}
                    >
                        <div className='flex gap-2'>
                            <TickCircle
                                className='size-5'
                                color='#fff'
                            />
                            <div>{t('customer.submit_customer')}</div>
                        </div>
                    </Button>
                </div>
            </div>
            {
                getProvines.isPending ?
                    <PageLoading />
                    :
                    <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 className='rowTwoInput'>
                                    <Input
                                        label={t('customer.name')}
                                        {...formik.getFieldProps('firstName')}
                                        error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
                                    />

                                    <Input
                                        label={t('customer.family')}
                                        {...formik.getFieldProps('lastName')}
                                        error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
                                    />
                                </div>

                                <div className='mt-8 rowTwoInput'>
                                    <DatePickerComponent
                                        label={t('customer.dateofbirth')}
                                        onChange={(value) => formik.setFieldValue('birthDate', value)}
                                        error_text={formik.touched.birthDate && formik.errors.birthDate ? formik.errors.birthDate : ''}
                                        placeholder=''
                                    />
                                    <Input
                                        label={t('customer.national_code')}
                                        placeholder={t('customer.enter_nation_code')}
                                        {...formik.getFieldProps('nationalCode')}
                                        error_text={formik.touched.nationalCode && formik.errors.nationalCode ? formik.errors.nationalCode : ''}
                                    />
                                </div>

                                <div className='mt-8 rowTwoInput'>
                                    <Input
                                        label={t('customer.email')}
                                        placeholder={t('customer.enter_email')}
                                        {...formik.getFieldProps('email')}
                                        error_text={formik.touched.email && formik.errors.email ? formik.errors.email : ''}
                                    />

                                    <Input
                                        label={t('customer.phone_number')}
                                        placeholder={t('customer.enter_phone_number')}
                                        {...formik.getFieldProps('phone')}
                                        error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
                                    />
                                </div>

                                <div className='mt-8'>
                                    {t('customer.information_legal')}
                                </div>

                                <div className='mt-8 rowTwoInput'>

                                    <Input
                                        label={t('customer.copany_name')}
                                        placeholder={t('customer.enter_company_name')}
                                        {...formik.getFieldProps('registrationName')}
                                        error_text={formik.touched.registrationName && formik.errors.registrationName ? formik.errors.registrationName : ''}
                                    />

                                    <Input
                                        label={t('customer.id_national')}
                                        placeholder={t('customer.enter_id_nation')}
                                        {...formik.getFieldProps('nationalIdentity')}
                                        error_text={formik.touched.nationalIdentity && formik.errors.nationalIdentity ? formik.errors.nationalIdentity : ''}
                                    />


                                </div>

                                <div className='mt-8 rowTwoInput'>

                                    <Input
                                        label={t('customer.economic_code')}
                                        placeholder={t('customer.enter_economic_code')}
                                        {...formik.getFieldProps('economicCode')}
                                        error_text={formik.touched.economicCode && formik.errors.economicCode ? formik.errors.economicCode : ''}
                                    />

                                    <Input
                                        label={t('customer.postal_code')}
                                        placeholder={t('customer.enter_postal_code')}
                                        {...formik.getFieldProps('postalCode')}
                                        error_text={formik.touched.postalCode && formik.errors.postalCode ? formik.errors.postalCode : ''}
                                    />


                                </div>

                                <div className='mt-8 rowTwoInput'>
                                    <Input
                                        label={t('customer.registeration_id')}
                                        placeholder={t('customer.enter_registeration_id')}
                                        {...formik.getFieldProps('registrationCode')}
                                        error_text={formik.touched.registrationCode && formik.errors.registrationCode ? formik.errors.registrationCode : ''}
                                    />

                                    {/* <Input
                                        label={t('customer.your_phone_fixed')}
                                        placeholder={t('customer.enter_phone_fixed')}
                                        {...formik.getFieldProps('phone')}
                                        error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
                                    /> */}
                                </div>

                                <div className='mt-8 rowTwoInput'>
                                    <Select
                                        label={t('customer.state')}
                                        items={getProvines.data?.data?.provinces.map((item: ProvinesItemType) => ({ label: item.name, value: item.id }))}
                                        onChange={(e) => setProvinesId(e.target.value)}
                                        placeholder={t('select')}

                                    />

                                    <Select
                                        label={t('customer.city')}
                                        items={getCities.data?.data?.cities ? getCities.data?.data?.cities.map((item: ProvinesItemType) => ({ label: item.name, value: item.id })) : []}
                                        placeholder={t('select')}
                                        {...formik.getFieldProps('cityId')}
                                        error_text={formik.touched.cityId && formik.errors.cityId ? formik.errors.cityId : ''}
                                    />
                                </div>

                                <div className='mt-8 rowTwoInput'>
                                    <Textarea
                                        {...formik.getFieldProps('address')}
                                        placeholder={t('customer.address')}
                                        error_text={formik.touched.address && formik.errors.address ? formik.errors.address : ''}
                                    />
                                </div>
                            </div>
                        </div>

                        <div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>

                            <div>
                                <Input
                                    label={t('customer.password')}
                                    type='password'
                                    {...formik.getFieldProps('password')}
                                    error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
                                />
                            </div>

                            {/* <div className='mt-5'>
                                <Input
                                    label={t('customer.reapeat_password')}
                                    type='password'
                                    {...formik.getFieldProps('password')}
                                    error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
                                />
                            </div> */}

                            <div className='mt-8'>
                                <div>{t('service.service_icon')}</div>
                                <div className='mt-2'>
                                    <UploadBoxDraggble
                                        label={t('service.upload_icon_service')}
                                        onChange={(files) => setFile(files[0])}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
            }
        </div>
    )
}

export default AddCustomer