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 { Textarea } from '@/Components/ui/textarea';
import { capitalize, t } from '@/lib/utils';
import RecipientsSelectInput from '@/Pages/Alert/RecipientsSelectInput';
import WeekDaysSelect from '@/Pages/DrugPrescription/WeekDaysSelect';
import ReminderDeleteAction from '@/Pages/Reminder/ReminderDeleteAction';
import { Reminder } from '@/types';
import { useForm } from '@inertiajs/react';
import dayjs from 'dayjs';
import { Loader2 } from 'lucide-react';
import React, { FormEventHandler } from 'react';

export default function ReminderEditForm({
    reminder,
    children,
    availableScheduleTypes,
    availableIntervalUnits,
}: {
    reminder: Reminder;
    children: React.ReactNode;
    availableScheduleTypes: string[];
    availableIntervalUnits: string[];
}) {
    const [open, setOpen] = React.useState(false);

    const scheduleOptions = availableScheduleTypes.map((x) => ({
        value: x,
        label: capitalize(t(`reminders.schedule_types.${x}`)),
    }));

    const intervalUnitOptions = availableIntervalUnits.map((x) => ({
        value: x,
        label: capitalize(t(`reminders.interval_units.${x}`)),
    }));

    const { data, setData, put, processing, errors, transform } = useForm({
        message: reminder.message ?? '',
        schedule_type: (reminder.schedule_type ?? 'once') as string,
        run_at_local: reminder.run_at
            ? dayjs(reminder.run_at).format('YYYY-MM-DDTHH:mm')
            : '',
        time_of_day: reminder.time_of_day ?? '09:00:00',
        weekdays: reminder.weekdays ?? [],
        interval_value: reminder.interval_value ?? 1,
        interval_unit:
            reminder.interval_unit ?? availableIntervalUnits[0] ?? 'days',
        timezone: reminder.timezone ?? 'Europe/Rome',
        enabled: reminder.enabled ?? true,
        recipients: reminder.recipients ?? [],
        user: reminder.user,
    });

    const fieldErrors = errors as Record<string, string | undefined>;

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

        transform(
            (d) =>
                ({
                    message: d.message,
                    enabled: d.enabled,
                    timezone: d.timezone,
                    schedule_type: d.schedule_type,

                    run_at:
                        d.schedule_type === 'once' && d.run_at_local
                            ? dayjs(d.run_at_local).toISOString()
                            : null,
                    time_of_day: ['daily', 'weekly'].includes(d.schedule_type)
                        ? d.time_of_day
                        : null,
                    weekdays: d.schedule_type === 'weekly' ? d.weekdays : null,
                    interval_value:
                        d.schedule_type === 'interval'
                            ? d.interval_value
                            : null,
                    interval_unit:
                        d.schedule_type === 'interval' ? d.interval_unit : null,

                    recipients: (d.recipients || []).map((r) => ({
                        id: r.id,
                        type: r.type,
                    })),
                }) as unknown as typeof d,
        );

        put(route('reminders.update', { reminder: reminder.id }), {
            preserveScroll: true,
            onSuccess: () => setOpen(false),
        });
    };

    const stopPropagation: FormEventHandler = (e) => e.stopPropagation();

    return (
        <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger asChild>{children}</SheetTrigger>

            <SheetContent side="right" className="overflow-auto">
                <SheetHeader>
                    <SheetTitle className="flex items-center justify-between gap-2">
                        <span>Modifica promemoria</span>
                        <div onClick={stopPropagation}>
                            <ReminderDeleteAction reminder={reminder} />
                        </div>
                    </SheetTitle>

                    <SheetDescription>
                        <form onSubmit={submit}>
                            <FormInput
                                label="Messaggio"
                                id="message"
                                className="mt-8 block w-full"
                                error={fieldErrors.message}
                            >
                                <Textarea
                                    value={data.message}
                                    onChange={(e) =>
                                        setData('message', e.target.value)
                                    }
                                />
                            </FormInput>

                            <div className="mt-8 text-black">
                                <div>Quando</div>

                                <FormInput
                                    label=""
                                    id="schedule_type"
                                    error={fieldErrors.schedule_type}
                                >
                                    <SelectInput
                                        value={data.schedule_type}
                                        options={scheduleOptions}
                                        onChange={(value) =>
                                            setData('schedule_type', value)
                                        }
                                    />
                                </FormInput>

                                {data.schedule_type === 'once' ? (
                                    <FormInput
                                        label="Data/ora"
                                        id="run_at"
                                        error={fieldErrors.run_at}
                                    >
                                        <input
                                            type="datetime-local"
                                            value={data.run_at_local}
                                            onChange={(e) =>
                                                setData(
                                                    'run_at_local',
                                                    e.target.value,
                                                )
                                            }
                                            className="focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md border-gray-300 shadow-sm"
                                        />
                                    </FormInput>
                                ) : null}

                                {data.schedule_type === 'daily' ? (
                                    <FormInput
                                        label="Orario"
                                        id="time_of_day"
                                        error={fieldErrors.time_of_day}
                                    >
                                        <TextInput
                                            value={data.time_of_day}
                                            onChange={(e) =>
                                                setData(
                                                    'time_of_day',
                                                    e.target.value,
                                                )
                                            }
                                            placeholder="HH:mm:ss"
                                        />
                                    </FormInput>
                                ) : null}

                                {data.schedule_type === 'weekly' ? (
                                    <>
                                        <FormInput
                                            label="Orario"
                                            id="time_of_day"
                                            error={fieldErrors.time_of_day}
                                        >
                                            <TextInput
                                                value={data.time_of_day}
                                                onChange={(e) =>
                                                    setData(
                                                        'time_of_day',
                                                        e.target.value,
                                                    )
                                                }
                                                placeholder="HH:mm:ss"
                                            />
                                        </FormInput>

                                        <FormInput
                                            label="Giorni"
                                            id="weekdays"
                                            error={fieldErrors.weekdays}
                                        >
                                            <WeekDaysSelect
                                                value={(
                                                    data.weekdays || []
                                                ).map((d) => (d === 7 ? 0 : d))}
                                                onChange={(days) =>
                                                    setData(
                                                        'weekdays',
                                                        days.map((d) =>
                                                            d === 0 ? 7 : d,
                                                        ),
                                                    )
                                                }
                                            />
                                        </FormInput>
                                    </>
                                ) : null}

                                {data.schedule_type === 'interval' ? (
                                    <div className="flex items-baseline justify-between gap-4">
                                        <FormInput
                                            label="Ogni"
                                            id="interval_value"
                                            className="w-full"
                                            error={fieldErrors.interval_value}
                                        >
                                            <TextInput
                                                type="number"
                                                value={data.interval_value}
                                                onChange={(e) =>
                                                    setData(
                                                        'interval_value',
                                                        parseInt(
                                                            e.target.value,
                                                        ),
                                                    )
                                                }
                                            />
                                        </FormInput>

                                        <FormInput
                                            label="Unità"
                                            id="interval_unit"
                                            className="w-full"
                                            error={fieldErrors.interval_unit}
                                        >
                                            <SelectInput
                                                value={data.interval_unit}
                                                options={intervalUnitOptions}
                                                onChange={(value) =>
                                                    setData(
                                                        'interval_unit',
                                                        value,
                                                    )
                                                }
                                            />
                                        </FormInput>
                                    </div>
                                ) : null}
                            </div>

                            {data?.user?.id ? (
                                <div className="mt-8 block w-full">
                                    <RecipientsSelectInput
                                        selectedRecipients={data.recipients}
                                        user={data.user}
                                        onChange={(recipients) =>
                                            setData('recipients', recipients)
                                        }
                                    />
                                </div>
                            ) : null}

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