import { FC } from 'react'
import { useTranslation } from 'react-i18next'
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, useGetDetailService } from '../hooks/useServiceData'
import { useParams } from 'react-router-dom'

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

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

    const { t } = useTranslation('global')
    const { id } = useParams()
    const { formik } = props

    const getCategory = useGetCategoryParents()
    const { data } = useGetDetailService(id)


    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')}
                    {...formik.getFieldProps('link')}
                    error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
                />
            </div>

            <div className='mt-8'>
                <Input
                    label={t('service.slug')}
                    {...formik.getFieldProps('slug')}
                    error_text={formik.touched.slug && formik.errors.slug ? formik.errors.slug : ''}
                />
            </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])}
                        preview={[data?.data?.danakService?.icon]}
                        onChangePreview={(images: string[]) => formik.setFieldValue('icon', images[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
                        preview={data?.data?.danakService?.images?.map((image: { imageUrl: string }) => image.imageUrl) || []}
                        onChangePreview={(images: string[]) => formik.setFieldValue('images', images)}
                        getCover={(url: string) => formik.setFieldValue('coverUrl', url)}
                        coverUrl={formik.values.coverUrl}
                    />
                </div>
            </div>
        </div>
    )
}

export default UpdateServiceSidebar