import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input';
import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormNumberInput } from '@admin/components/ui/forms/form-number-input';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';

type FacilityFormData = {
    name: string;
    icon: string;
    sort_order: number;
    status: boolean;
};

type FacilityFormFieldsProps = {
    data: FacilityFormData;
    errors: Partial<Record<keyof FacilityFormData, string>>;
    setData: (key: string, value: unknown) => void;
    iconInputId?: string;
    statusId?: string;
};

function mediaUrl(path: string): string {
    if (!path) {
        return '';
    }

    if (path.startsWith('/') || path.startsWith('http')) {
        return path;
    }

    return `/storage/${path}`;
}

export function FacilityFormFields({ data, errors, setData, iconInputId = 'facility-icon', statusId = 'facility-status' }: FacilityFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Name"
                error={errors.name}
                inputProps={{
                    value: data.name,
                    onChange: (event) => setData('name', event.target.value),
                    required: true,
                }}
            />
            <FileUploadInput
                label="Icon (100×100 px recommended)"
                inputId={iconInputId}
                uploadUrl="/admin/api/facility/upload_icon"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={mediaUrl(data.icon)}
                previewType="image"
                error={errors.icon}
                onSuccess={(filename) => setData('icon', filename)}
            />
            <FormNumberInput
                label="Display order"
                min={0}
                value={data.sort_order}
                error={errors.sort_order}
                required
                onChange={(value) => setData('sort_order', value)}
            />
            <FormSwitch id={statusId} label="Published" checked={data.status} onChange={(event) => setData('status', event.target.checked)} />
        </>
    );
}