import CitySelectInput from '@/Components/CitySelectInput';
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 { City } from '@/types';
import { useForm } from '@inertiajs/react';
import { Loader2 } from 'lucide-react';
import React, { FormEventHandler } from 'react';

interface CompanyFormData {
    name: string | null;
    city: City | null;
}

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

    const { data, setData, post, processing, errors, reset, transform } =
        useForm<CompanyFormData>({
            name: null,
            city: null,
        });

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

        transform(
            (data) =>
                ({
                    ...data,
                    city_id: data.city ? data.city.id : null,
                }) as unknown as CompanyFormData,
        );

        post(route('companies.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>Nuova azienda</SheetTitle>
                    <SheetDescription>
                        <form onSubmit={submit}>
                            <FormInput
                                label="Nome"
                                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="Città"
                                id="city"
                                className="my-4 block w-full"
                                error={errors.city}
                            >
                                <CitySelectInput
                                    value={data.city}
                                    onChange={(city) => setData('city', city)}
                                />
                            </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>
    );
}