import { type FC } from 'react'
import { Add } from 'iconsax-react'
import Input from '@/components/Input'
import UploadBox from '@/components/UploadBox'
import SwitchComponent from '@/components/Switch'
import Button from '@/components/Button'
import type { FormikProps } from 'formik'

type CategoryFormValues = {
  title: string
  icon: File[]
}

type Props = {
  formik: FormikProps<CategoryFormValues>
  isActive: boolean
  onActiveChange: (value: boolean) => void
  onIconChange: (files: File[]) => void
  iconFiles: File[]
  isSubmitting: boolean
  isEditing?: boolean
}

const CategoryForm: FC<Props> = ({
  formik,
  isActive,
  onActiveChange,
  onIconChange,
  iconFiles,
  isSubmitting,
  isEditing = false
}) => {
  return (
    <div className="w-[300px] bg-white rounded-3xl p-6 h-fit sticky top-6">
      <h2 className="font-light mb-6">{isEditing ? 'ویرایش دسته بندی' : 'اضافه کردن دسته بندی'}</h2>

      <div className="flex items-center justify-between mb-6">
        <div className="text-sm">فعال</div>
        <SwitchComponent
          active={isActive}
          onChange={onActiveChange}
        />
      </div>

      <div className="mb-4">
        <Input
          label="عنوان دسته بندی"
          name="title"
          value={formik.values.title}
          onChange={formik.handleChange}
          error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
        />
      </div>

      <div className="mb-6">
        <UploadBox
          label="آیکون دسته بندی"
          onChange={(files) => {
            onIconChange(files)
            formik.setFieldValue('icon', files)
          }}
          isReset={iconFiles.length === 0 && formik.values.icon.length === 0}
        />
      </div>

      <Button
        onClick={() => formik.handleSubmit()}
        className="w-full"
        isLoading={isSubmitting}
      >
        <Add color='#fff' size={20} className="ml-2" />
        ذخیره
      </Button>
    </div>
  )
}

export default CategoryForm

