import { FC } from 'react'
import SwitchComponent from '../../../components/Switch'
import Input from '../../../components/Input'
import { useGetIndustries } from '../hooks/useCompanyData'
import { useTranslation } from 'react-i18next'
import CheckBoxComponent from '../../../components/CheckBoxComponent'
import { CreateCompanyType, IndustryItemType } from '../types/CompanyTypes'
import { FormikProps } from 'formik'
import UploadBoxDraggble from '../../../components/UploadBoxDraggble'

type Props = {
    formik: FormikProps<CreateCompanyType>
    setProfileImage: (image: File) => void
    setCoverImage: (image: File) => void
}

const UpdateSidebar: FC<Props> = ({ formik, setProfileImage, setCoverImage }) => {

    const { t } = useTranslation('global')
    const { data: industries } = useGetIndustries(1, '', '')

    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 items-center'>
                <div className='text-sm'>
                    وضعیت شرکت
                </div>
                <SwitchComponent
                    active={formik.values.isActive}
                    onChange={(value) => formik.setFieldValue('isActive', value)}
                />
            </div>

            <div className='mt-6'>
                <Input
                    label='آدرس وبسایت شرکت'
                    name='websiteUrl'
                    value={formik.values.websiteUrl}
                    onChange={formik.handleChange}
                    error_text={formik.touched.websiteUrl && formik.errors.websiteUrl ? formik.errors.websiteUrl : ''}
                />
            </div>

            <div className='mt-8'>
                <div className='text-sm'>{t('company.industry')}</div>
                <div className='mt-2 border border-border rounded-xl p-4'>
                    {
                        industries?.data?.industries?.map((item: IndustryItemType) => {
                            return (
                                <div key={item.id} className='flex items-center'>
                                    <CheckBoxComponent
                                        checked={formik.values.industryId === item.id}
                                        onChange={(e) => formik.setFieldValue('industryId', e.target.checked ? item.id : '')}
                                    />
                                    <div>{item.title}</div>
                                </div>
                            )
                        })
                    }

                </div>
            </div>

            <div className='mt-8'>
                <div className='text-sm mb-2'>{t('company.profile_image')}</div>
                <UploadBoxDraggble
                    label={t('company.profile_image')}
                    onChange={(files) => setProfileImage(files[0])}
                />
            </div>

            <div className='mt-8'>
                <div className='text-sm mb-2'>{t('company.cover_image')}</div>
                <UploadBoxDraggble
                    label={t('company.cover_image')}
                    onChange={(files) => setCoverImage(files[0])}
                />
            </div>
        </div>
    )
}

export default UpdateSidebar