import { type FC } from 'react'
import type { FormikProps } from 'formik'
import UploadBox from '../../../components/UploadBox'

type SocialMediaLink = {
    id: string
    icon: string
    url: string
}

type FormValues = {
    siteLogo?: string
    footerPhone: string
    footerEmail: string
    footerAddress: string
    footerDescription: string
    shopPostalCode?: string
    downloadAppDetails: { id: string; pic: string; url: string }[]
    socialMediaLinks: SocialMediaLink[]
}

type Props = {
    formik: FormikProps<FormValues>
    logoFile: File[]
    setLogoFile: React.Dispatch<React.SetStateAction<File[]>>
    postalCodeFile: File[]
    setPostalCodeFile: React.Dispatch<React.SetStateAction<File[]>>
}

const FilesSection: FC<Props> = ({
    formik,
    logoFile,
    setLogoFile,
    postalCodeFile,
    setPostalCodeFile
}) => {
    return (
        <div className='w-80 space-y-6'>
            <div className='text-sm bg-white py-8 px-6 rounded-3xl'>
                <h2 className='text-lg font-medium mb-6'>فایل‌ها</h2>

                <div className='space-y-6'>
                    <div>
                        <label className="block text-sm font-medium mb-2">لوگو سایت</label>
                        <UploadBox
                            label=""
                            isMultiple={false}
                            onChange={(files) => setLogoFile(files)}
                        />
                        {(logoFile.length > 0 || formik.values.siteLogo) && (
                            <img
                                src={logoFile.length > 0 ? URL.createObjectURL(logoFile[0]) : formik.values.siteLogo}
                                alt="لوگو سایت"
                                className="mt-2 w-20 h-20 object-contain rounded"
                            />
                        )}
                    </div>

                    <div>
                        <label className="block text-sm font-medium mb-2">کد پستی فروشگاه</label>
                        <UploadBox
                            label=""
                            isMultiple={false}
                            onChange={(files) => setPostalCodeFile(files)}
                        />
                        {(postalCodeFile.length > 0 || formik.values.shopPostalCode) && (
                            <img
                                src={postalCodeFile.length > 0 ? URL.createObjectURL(postalCodeFile[0]) : formik.values.shopPostalCode}
                                alt="کد پستی فروشگاه"
                                className="mt-2 w-20 h-20 object-contain rounded"
                            />
                        )}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default FilesSection
