import FormInput from '@/Components/FormInput';
import SidebarForm from '@/Components/SidebarForm';
import TextInput from '@/Components/TextInput';
import { Drug, SidebarFormBodyProps } from '@/types';
import React from 'react';

interface DrugEditFormProps {
    drug: Drug;
    children: React.ReactNode;
    availableTypes?: string[];
    canEdit: boolean;
}

type DrugFormData = {
    name: string;
    active_ingredient: string;
    package_unit: string;
    administration_method: string;
    administration_condition: string;
    quantity_per_package: number;
};

export default function DrugEditForm({
    drug,
    children: trigger,
    canEdit,
}: DrugEditFormProps) {
    const initialData = {
        name: drug.name,
        active_ingredient: drug.active_ingredient,
        package_unit: drug.package_unit,
        administration_method: drug.administration_method,
        administration_condition: drug.administration_condition,
        quantity_per_package: drug.quantity_per_package,
    };

    const Body = (bodyProps: Partial<SidebarFormBodyProps<DrugFormData>>) => {
        const { data, setData, errors } =
            bodyProps as SidebarFormBodyProps<DrugFormData>;
        return (
            <>
                <FormInput
                    label="Denominazione"
                    id="name"
                    className="my-4 block w-full"
                    error={errors.name}
                >
                    <TextInput
                        value={data.name}
                        onChange={(e) => setData('name', e.target.value)}
                        readOnly={!canEdit}
                    />
                </FormInput>
                <FormInput
                    label="Principio attivo"
                    id="name"
                    className="my-4 block w-full"
                    error={errors.active_ingredient}
                >
                    <TextInput
                        value={data.active_ingredient}
                        readOnly={!canEdit}
                        onChange={(e) =>
                            setData('active_ingredient', e.target.value)
                        }
                    />
                </FormInput>
                <FormInput
                    label="Forma"
                    id="name"
                    className="my-4 block w-full"
                    error={errors.package_unit}
                >
                    <TextInput
                        value={data.package_unit}
                        readOnly={!canEdit}
                        onChange={(e) =>
                            setData('package_unit', e.target.value)
                        }
                    />
                </FormInput>
                <FormInput
                    label="Quantità"
                    id="quantity_per_package"
                    className="my-4 block w-full"
                    error={errors.quantity_per_package}
                >
                    <TextInput
                        readOnly={!canEdit}
                        type="number"
                        value={data.quantity_per_package}
                        onChange={(e) =>
                            setData(
                                'quantity_per_package',
                                parseInt(e.target.value),
                            )
                        }
                    />
                </FormInput>
                <FormInput
                    label="Metodo di somministrazione"
                    id="administration_method"
                    className="my-4 block w-full"
                    error={errors.administration_method}
                >
                    <TextInput
                        readOnly={!canEdit}
                        value={data.administration_method}
                        onChange={(e) =>
                            setData('administration_method', e.target.value)
                        }
                    />
                </FormInput>
                <FormInput
                    label="Condizione"
                    id="administration_condition"
                    className="my-4 block w-full"
                    error={errors.administration_condition}
                >
                    <TextInput
                        readOnly={!canEdit}
                        value={data.administration_condition}
                        onChange={(e) =>
                            setData('administration_condition', e.target.value)
                        }
                    />
                </FormInput>
            </>
        );
    };

    return (
        <SidebarForm
            title={canEdit ? 'Modifica farmaco' : 'Dettagli farmaco'}
            trigger={trigger}
            submitMethod={'put'}
            submitRoute={route('admin-drugs.update', { drug: drug.id })}
            initialData={initialData}
            canSubmit={canEdit}
        >
            <Body />
        </SidebarForm>
    );
}