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

interface DeviceCreateFormProps {
    availableTypes: string[];
    availableManufacturers: string[];
}

type DeviceFormData = {
    manufacturer: string;
    model: string;
    type: string;
    serial_number: string;
    company: Company | null;
    sync_alert_after_value: number;
    sync_alert_after_unit: IntervalUnit;
};

export default function DeviceCreateForm({
    availableTypes,
    availableManufacturers,
}: DeviceCreateFormProps) {
    const [open, setOpen] = React.useState(false);

    const { data, setData, post, processing, errors, reset, transform } =
        useForm<DeviceFormData>({
            manufacturer: '',
            model: '',
            type: '',
            serial_number: '',
            company: null,

            // alert quando non sincronizza da X tempo
            sync_alert_after_value: 60,
            sync_alert_after_unit: 'minutes',
        });

    const formErrors = errors as FormErrors;

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

    const availableManufacturersOptions = availableManufacturers.map(
        (manufacturer) => ({
            value: manufacturer,
            label: manufacturer,
        }),
    );

    const syncAlertUnitOptions = [
        { value: 'minutes', label: 'Minuti' },
        { value: 'hours', label: 'Ore' },
        { value: 'days', label: 'Giorni' },
    ];

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

        transform(
            (d) =>
                ({
                    ...d,
                    company_id: d.company ? d.company.id : null,

                    // se vuoi garantire int in ogni caso
                    sync_alert_after_value: d.sync_alert_after_value
                        ? parseInt(String(d.sync_alert_after_value))
                        : null,
                }) as unknown as DeviceFormData,
        );

        post(route('admin-devices.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 dispositivo</SheetTitle>
                    <SheetDescription>
                        <form onSubmit={submit}>
                            <FormInput
                                label={t('manufacturer')}
                                id="manufacturer"
                                className="mt-8 block w-full"
                                error={errors.manufacturer}
                            >
                                <SelectInput
                                    value={data.manufacturer}
                                    options={availableManufacturersOptions}
                                    onChange={(value) =>
                                        setData('manufacturer', value)
                                    }
                                />
                            </FormInput>

                            <FormInput
                                label={t('model')}
                                id="model"
                                className="my-4 block w-full"
                                error={errors.model}
                            >
                                <TextInput
                                    value={data.model}
                                    onChange={(e) =>
                                        setData('model', e.target.value)
                                    }
                                />
                            </FormInput>

                            <FormInput
                                label={t('type')}
                                id="type"
                                className="my-4 block w-full"
                                error={errors.type}
                            >
                                <SelectInput
                                    value={data.type}
                                    options={availableTypesOptions}
                                    onChange={(value) => setData('type', value)}
                                />
                            </FormInput>

                            <FormInput
                                label={t('serial number')}
                                id="serial_number"
                                className="my-4 block w-full"
                                error={errors.serial_number}
                            >
                                <TextInput
                                    value={data.serial_number}
                                    onChange={(e) =>
                                        setData('serial_number', e.target.value)
                                    }
                                />
                            </FormInput>

                            <FormInput
                                label="Azienda"
                                id="company"
                                className="my-4 block w-full"
                                error={formErrors.company_id}
                            >
                                <CompanySelectInput
                                    value={data.company}
                                    onChange={(company) =>
                                        setData('company', company)
                                    }
                                />
                            </FormInput>

                            {/* soglia alert sync */}
                            <div className="mt-8 text-black">
                                <div>Alert se non sincronizza</div>

                                <div className="mt-3 flex items-baseline justify-between gap-4">
                                    <FormInput
                                        label="Dopo"
                                        id="sync_alert_after_value"
                                        className="w-full"
                                        error={
                                            formErrors.sync_alert_after_value
                                        }
                                    >
                                        <TextInput
                                            type="number"
                                            min={1}
                                            value={data.sync_alert_after_value}
                                            onChange={(e) =>
                                                setData(
                                                    'sync_alert_after_value',
                                                    parseInt(e.target.value),
                                                )
                                            }
                                        />
                                    </FormInput>

                                    <FormInput
                                        label="Unità"
                                        id="sync_alert_after_unit"
                                        className="w-full"
                                        error={formErrors.sync_alert_after_unit}
                                    >
                                        <SelectInput
                                            value={data.sync_alert_after_unit}
                                            options={syncAlertUnitOptions}
                                            onChange={(value) =>
                                                setData(
                                                    'sync_alert_after_unit',
                                                    value as IntervalUnit,
                                                )
                                            }
                                        />
                                    </FormInput>
                                </div>
                            </div>

                            <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>
    );
}