import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input';
import { FormSection } from '@admin/components/ui/forms/form-section';

export type MenuBackgroundImagesFormData = {
    bg_image_1: string;
    bg_image_2: string;
    bg_image_3: string;
    bg_image_4: string;
    bg_image_5: string;
};

export type MenuBackgroundUploadSlot = {
    slot: number;
    field: keyof MenuBackgroundImagesFormData;
    label: string;
    width: number;
    height: number;
    uploadUrl: string;
};

type MenuBackgroundImagesFormFieldsProps = {
    data: MenuBackgroundImagesFormData;
    errors: Partial<Record<keyof MenuBackgroundImagesFormData, string>>;
    setData: (key: string, value: unknown) => void;
    slots: MenuBackgroundUploadSlot[];
};

export function MenuBackgroundImagesFormFields({
    data,
    errors,
    setData,
    slots,
}: MenuBackgroundImagesFormFieldsProps) {
    return (
        <>
            {slots.map((slot) => (
                <FormSection key={slot.field} title={slot.label}>
                    <FileUploadInput
                        label={`${slot.label} (${slot.width}×${slot.height} px recommended)`}
                        inputId={`menu-background-${slot.slot}`}
                        uploadUrl={slot.uploadUrl}
                        accept="image/jpeg,image/png,image/jpg,image/webp"
                        previewUrl={data[slot.field] ? `/storage/${data[slot.field]}` : ''}
                        previewType="image"
                        error={errors[slot.field]}
                        onSuccess={(filename) => setData(slot.field, filename)}
                    />
                </FormSection>
            ))}
        </>
    );
}