import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Select from '../../components/Select'
import Input from '../../components/Input'
import Td from '../../components/Td'
import SwitchComponent from '../../components/Switch'
import { useGetGroups } from '../users/hooks/useUserData'
import { useFormik } from 'formik'
import { CategoriesItemType, CreateCategoryType } from './types/TicketTypes'
import * as Yup from 'yup'
import { GroupItemType } from '../users/types/UserTypes'
import Button from '../../components/Button'
import { useCreateCategory, useGetCategories } from './hooks/useTicketData'
import Textarea from '../../components/Textarea'
import { ErrorType } from '../../helpers/types'
import { toast } from 'react-toastify'

const TicketCategory: FC = () => {

    const { t } = useTranslation('global')
    const getGroups = useGetGroups()
    const createCategory = useCreateCategory()
    const getCategories = useGetCategories()

    const formik = useFormik<CreateCategoryType>({
        initialValues: {
            title: '',
            description: '',
            userGroupId: '',
            isActive: true
        },
        validationSchema: Yup.object({
            title: Yup.string().required(t('errors.required')),
            userGroupId: Yup.string().required(t('errors.required')),
            description: Yup.string().required(t('errors.required')),
        }),
        onSubmit: values => {
            createCategory.mutate(values, {
                onSuccess: () => {
                    formik.resetForm()
                },
                onError: (error: ErrorType) => {
                    toast.error(error.response?.data?.error.message[0])
                }
            })
        }
    })

    return (
        <div className='mt-4'>
            <div>
                {t('ticket.category_ticket')}
            </div>

            <div className='flex gap-6 xl:mt-8 mt-4'>
                <div className='flex-1'>
                    <div className='flex w-full  justify-between items-center'>
                        <div className='w-28'>
                            <Select
                                items={[
                                    {
                                        label: '',
                                        value: ''
                                    }
                                ]}
                                placeholder={t('status')}
                                className='border'
                            />
                        </div>

                        <div>
                            <Input
                                variant='search'
                                placeholder={t('search')}
                                className='bg-white border'
                            />
                        </div>
                    </div>
                    <div className='bg-white mt-5 py-3 xl:px-10 px-4 rounded-3xl flex-1'>
                        <div className='relative overflow-x-auto rounded-3xl w-full'>
                            <table className='w-full text-sm '>
                                <thead className='thead'>
                                    <tr>
                                        <Td text={t('title')} />
                                        <Td text={t('status')} />
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        getCategories.data?.data?.ticketCategories?.map((item: CategoriesItemType) => (
                                            <tr className='tr'>
                                                <Td text={item.title} />
                                                <Td text={item.isActive ? t('active') : t('inactive')} />
                                            </tr>
                                        ))
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div className='bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
                    <div className='text-sm'>
                        {t('ticket.add_category')}
                    </div>

                    <div className='mt-6 flex justify-between items-center'>
                        <div className='text-xs'>
                            {t('ticket.status_category')}
                        </div>

                        <SwitchComponent
                            active={formik.values.isActive}
                            onChange={(value) => formik.setFieldValue('isActive', value)}
                        />
                    </div>

                    <div className='mt-6'>
                        <Input
                            label={t('ticket.title_category')}
                            {...formik.getFieldProps('title')}
                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                        />
                    </div>

                    <div className='mt-6'>
                        <Textarea
                            label={t('description')}
                            {...formik.getFieldProps('description')}
                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                        />
                    </div>

                    <div className='mt-6'>
                        <Select
                            label={t('ticket.users')}
                            items={getGroups.data?.data?.usersGroup?.map((item: GroupItemType) => ({
                                label: item.name,
                                value: item.id
                            }))}
                            {...formik.getFieldProps('userGroupId')}
                            error_text={formik.touched.userGroupId && formik.errors.userGroupId ? formik.errors.userGroupId : ''}
                            placeholder={t('select')}
                            className='border'
                        />
                    </div>

                    <div className='mt-6'>
                        <Button
                            label={t('submit')}
                            onClick={() => formik.handleSubmit()}
                            isLoading={createCategory.isPending}
                        />
                    </div>

                    {/* <div className='mt-6 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap'>
                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
                            <div className='  '>
                                سیما فرهادی
                            </div>
                            <CloseCircle
                                variant='Bold'
                                className='size-4'
                                color='red'
                            />
                        </div>
                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
                            <div className='  '>
                                سیما فرهادی
                            </div>
                            <CloseCircle
                                variant='Bold'
                                className='size-4'
                                color='red'
                            />
                        </div>
                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
                            <div className='  '>
                                سیما فرهادی
                            </div>
                            <CloseCircle
                                variant='Bold'
                                className='size-4'
                                color='red'
                            />
                        </div>
                    </div> */}
                </div>
            </div>
        </div>
    )
}

export default TicketCategory