import ComboBoxInput from '@/Components/ComboBoxInput';
import { DateTimePicker } from '@/Components/DateTimePicker';
import FormInput from '@/Components/FormInput';
import PrimaryButton from '@/Components/PrimaryButton';
import SelectInput from '@/Components/SelectInput';
import TextInput from '@/Components/TextInput';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from '@/Components/ui/sheet';
import { t } from '@/lib/utils';
import { User } from '@/types';
import { useForm } from '@inertiajs/react';
import axios from 'axios';
import dayjs, { Dayjs } from 'dayjs';
import { Loader2 } from 'lucide-react';
import React, { FormEventHandler, useState } from 'react';

interface ExamCreateFormProps {
    availableTypes: string[];
}

interface ExamFormData {
    user: User | null;
    type: string;
    value: number;
    done_at: Dayjs;
}

export default function ExamCreateForm({
    availableTypes,
}: ExamCreateFormProps) {
    const [open, setOpen] = React.useState(false);
    const [availableUsers, setAvailableUsers] = useState<User[]>([]);

    const { data, setData, post, processing, errors, reset, transform } =
        useForm<ExamFormData>({
            user: null,
            type: availableTypes[0],
            value: 100,
            done_at: dayjs(),
        });
    const formErrors = errors as Record<string, string>;

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

        transform(
            (data) =>
                ({
                    user_id: data.user ? data.user.id : null,
                    type: data.type,
                    value: data.value,
                    done_at: data.done_at,
                }) as unknown as ExamFormData,
        );

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

    const fetchUsers = async (search: string) => {
        try {
            const response = await axios.get(route('search-users'), {
                params: { search },
            });
            setAvailableUsers(response.data);
        } catch (error) {
            console.error('Error fetching items:', error);
        }
    };

    const availableTypesOptions = availableTypes.map((type) => ({
        value: type,
        label: t(type),
    }));

    return (
        <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger asChild>
                <PrimaryButton>Aggiungi</PrimaryButton>
            </SheetTrigger>
            <SheetContent side="right" className="overflow-auto">
                <SheetHeader>
                    <SheetTitle>Nuovo esame</SheetTitle>
                    <SheetDescription>
                        <form onSubmit={submit}>
                            <FormInput
                                label="Utente"
                                id="user_id"
                                className="mt-8 block w-full"
                                error={formErrors.user_id}
                            >
                                <ComboBoxInput
                                    value={data.user}
                                    options={availableUsers}
                                    renderOption={(user) =>
                                        `${user.name} ${user.surname}`
                                    }
                                    onChange={(value) => setData('user', value)}
                                    onSearchChange={fetchUsers}
                                />
                            </FormInput>
                            <FormInput
                                label="Tipo"
                                id="type"
                                className="my-4 block w-full"
                                error={errors.type}
                            >
                                <SelectInput
                                    options={availableTypesOptions}
                                    value={data.type}
                                    onChange={(value) => setData('type', value)}
                                />
                            </FormInput>
                            <FormInput
                                label="Data"
                                id="value"
                                className="my-4 block w-full"
                                error={errors.value}
                            >
                                <DateTimePicker
                                    date={data.done_at.toDate()}
                                    setDate={(date) =>
                                        setData('done_at', dayjs(date))
                                    }
                                />
                            </FormInput>
                            <FormInput
                                label="Valore"
                                id="value"
                                className="my-4 block w-full"
                                error={errors.value}
                            >
                                <TextInput
                                    type="number"
                                    value={data.value}
                                    onChange={(e) =>
                                        setData(
                                            'value',
                                            parseInt(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>
    );
}