import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import SwitchComponent from '../../../components/Switch'
import CheckBoxComponent from '../../../components/CheckBoxComponent'
import Input from '../../../components/Input'
import UploadBoxDraggble from '../../../components/UploadBoxDraggble'
import { FormikProps } from 'formik'
import { CreateServiceType, ServiceCategoryType } from '../types/ServiceTypes'
import { useGetCategoryParents } from '../hooks/useServiceData'

type Props = {
    formik: FormikProps<CreateServiceType>,
    onChangeIconFile: (file: File) => void,
    onChangeImagesFile: (file: File[]) => void
}

const AddServiceSidebar: FC<Props> = (props: Props) => {

    const getCategory = useGetCategoryParents()

    const { formik } = props

    const { t } = useTranslation('global')

    return (
        <div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
            <div className='flex justify-between'>
                <div className='text-sm'>
                    {t('service.service_status')}
                </div>
                <div className='flex gap-1'>
                    <SwitchComponent
                        active={formik.values.isDanakSuggest}
                        onChange={(e) => formik.setFieldValue('isDanakSuggest', e)}
                    />
                </div>
            </div>

            <div className='mt-8 items-center flex '>
                <CheckBoxComponent
                    checked={formik.values.isDanakSuggest}
                    onChange={(e) => formik.setFieldValue('isDanakSuggest', e.target.checked)}
                />
                <div>{t('service.special_danak')}</div>
            </div>

            <div className='mt-8'>
                <Input
                    label={t('service.service_link')}
                    name='link'
                    onChange={formik.handleChange}
                    error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
                />
            </div>

            <div className='mt-8'>
                <div>{t('service.category')}</div>
                <div className='mt-2 border border-border rounded-xl p-4'>
                    {
                        getCategory.data?.data?.categories?.map((item: ServiceCategoryType) => {
                            return (
                                <div key={item.id} className='flex items-center'>
                                    <CheckBoxComponent
                                        checked={formik.values.categoryId === item.id}
                                        onChange={(e) => formik.setFieldValue('categoryId', e.target.checked ? item.id : '')}
                                    />
                                    <div>{item.title}</div>
                                </div>
                            )
                        })
                    }

                </div>
            </div>

            <div className='mt-8'>
                <div>{t('service.service_icon')}</div>
                <div className='mt-2'>
                    <UploadBoxDraggble
                        label={t('service.upload_icon_service')}
                        onChange={(file: File[]) => props.onChangeIconFile(file[0])}
                    />
                </div>
            </div>
            <div className='mt-8'>
                <div>{t('service.service_images')}</div>
                <div className='mt-2'>
                    <UploadBoxDraggble
                        label={t('service.upload_images_service')}
                        onChange={props.onChangeImagesFile}
                        isMultiple
                    />
                </div>
            </div>
        </div>
    )
}

export default AddServiceSidebar