import FormInput from '@/Components/FormInput';
import PrimaryButton from '@/Components/PrimaryButton';
import TextInput from '@/Components/TextInput';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from '@/Components/ui/sheet';
import { t } from '@/lib/utils';
import { useForm } from '@inertiajs/react';
import { Loader2 } from 'lucide-react';
import React, { FormEventHandler } from 'react';

interface DrugFormData {
    name: string | null;
    active_ingredient: string | null;
    package_unit: string | null;
    administration_method: string | null;
    administration_condition: string | null;
    quantity_per_package: number | null;
}

export default function DrugCreateForm() {
    const [open, setOpen] = React.useState(false);

    const { data, setData, post, processing, errors, reset } =
        useForm<DrugFormData>({
            name: null,
            active_ingredient: null,
            package_unit: null,
            administration_method: null,
            administration_condition: null,
            quantity_per_package: null,
        });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        post(route('drugs.create'), {
            onSuccess: () => {
                setOpen(false);
                reset();
            },
        });
    };

    return (
        <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger asChild>
                <PrimaryButton>Aggiungi</PrimaryButton>
            </SheetTrigger>
            <SheetContent side="right" className="overflow-auto">
                <SheetHeader>
                    <SheetTitle>Nuovo farmaco</SheetTitle>
                    <SheetDescription>
                        <form onSubmit={submit}>
                            <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)
                                    }
                                />
                            </FormInput>
                            <FormInput
                                label="Principio attivo"
                                id="name"
                                className="my-4 block w-full"
                                error={errors.active_ingredient}
                            >
                                <TextInput
                                    value={data.active_ingredient}
                                    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}
                                    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
                                    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
                                    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
                                    value={data.administration_condition}
                                    onChange={(e) =>
                                        setData(
                                            'administration_condition',
                                            e.target.value,
                                        )
                                    }
                                />
                            </FormInput>

                            <div className="mt-20 flex items-center justify-end">
                                <PrimaryButton
                                    className="ms-4"
                                    disabled={processing}
                                >
                                    {processing ? (
                                        <Loader2 className="animate-spin" />
                                    ) : null}
                                    {t('Save')}
                                </PrimaryButton>
                            </div>
                        </form>
                    </SheetDescription>
                </SheetHeader>
            </SheetContent>
        </Sheet>
    );
}