import { type FC } from 'react'
import { CategoryThemeEnum } from '../enum/Enum'
import Button from '../../../components/Button'
import DefaulModal from '../../../components/DefaulModal'
import Input from '../../../components/Input'

interface VariantModalProps {
    isOpen: boolean
    onClose: () => void
    theme: CategoryThemeEnum
    newVariant: {
        value: string
        name: string
        hexColor: string
    }
    onVariantChange: (variant: { value: string; name: string; hexColor: string }) => void
    onAdd: () => void
    isLoading?: boolean
}

const VariantModal: FC<VariantModalProps> = ({
    isOpen,
    onClose,
    theme,
    newVariant,
    onVariantChange,
    onAdd,
    isLoading = false
}) => {
    const getModalTitle = () => {
        switch (theme) {
            case CategoryThemeEnum.Sized:
                return 'اضافه کردن سایز جدید'
            case CategoryThemeEnum.Colored:
                return 'اضافه کردن رنگ جدید'
            case CategoryThemeEnum.Meterage:
                return 'اضافه کردن متریاژ جدید'
            default:
                return 'اضافه کردن variant جدید'
        }
    }

    const renderFormContent = () => {
        switch (theme) {
            case CategoryThemeEnum.Sized:
                return (
                    <Input
                        label="مقدار سایز"
                        placeholder="مثال: XL, M, 42"
                        value={newVariant.value}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onVariantChange({ ...newVariant, value: e.target.value })}
                    />
                )

            case CategoryThemeEnum.Colored:
                return (
                    <div className="space-y-4">
                        <Input
                            label="نام رنگ"
                            placeholder="مثال: آبی, قرمز"
                            value={newVariant.name}
                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => onVariantChange({ ...newVariant, name: e.target.value })}
                        />
                        <div className="space-y-2">
                            <label className="text-sm">کد رنگ</label>
                            <div className="flex items-center gap-3">
                                <input
                                    type="color"
                                    value={newVariant.hexColor}
                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onVariantChange({ ...newVariant, hexColor: e.target.value })}
                                    className="w-12 h-10 border border-gray-300 rounded cursor-pointer"
                                />
                                <Input
                                    value={newVariant.hexColor}
                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onVariantChange({ ...newVariant, hexColor: e.target.value })}
                                    className="flex-1"
                                />
                            </div>
                        </div>
                    </div>
                )

            case CategoryThemeEnum.Meterage:
                return (
                    <Input
                        label="مقدار متریاژ"
                        placeholder="مثال: 2 متر, 5 سانتی متر"
                        value={newVariant.value}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onVariantChange({ ...newVariant, value: e.target.value })}
                    />
                )

            default:
                return null
        }
    }

    const isFormValid = () => {
        switch (theme) {
            case CategoryThemeEnum.Sized:
                return !!newVariant.value.trim()
            case CategoryThemeEnum.Colored:
                return !!newVariant.name.trim()
            case CategoryThemeEnum.Meterage:
                return !!newVariant.value.trim()
            default:
                return false
        }
    }

    return (
        <DefaulModal
            open={isOpen}
            close={onClose}
            isHeader={true}
            title_header={getModalTitle()}
            width={500}
        >
            <div className="space-y-6">
                {renderFormContent()}

                <div className="flex gap-3 pt-4 border-t border-border">
                    <Button
                        variant="outline"
                        className="flex-1"
                        onClick={onClose}
                    >
                        انصراف
                    </Button>
                    <Button
                        variant="primary"
                        className="flex-1"
                        onClick={onAdd}
                        disabled={!isFormValid() || isLoading}
                    >
                        {isLoading ? 'در حال اضافه کردن...' : 'اضافه کردن'}
                    </Button>
                </div>
            </div>
        </DefaulModal>
    )
}

export default VariantModal
