import ReminderForm, { NormalizedReminderPayload } from '@admin/components/addOns/addon-sidebars/reminders/ReminderForm';
import { Sheet, SheetContent } from '../ui/sheet';
import { X } from 'lucide-react';
import { Button } from '../ui/button';
import { usePage } from '@inertiajs/react';

type Mode = 'add' | 'edit';

interface UserOption {
    label: string;
    value: string;
}

interface StatusOption {
    label: string;
    value: string;
}

const ReminderAddModal = ({
    isAddReminderModalOpen,
    setIsAddReminderModalOpen,
    mode = 'add',
    initialTask,
    onSubmit,
}: {
    isAddReminderModalOpen: boolean;
    setIsAddReminderModalOpen: (open: boolean) => void;
    mode?: Mode;
    initialTask?: any;
    onSubmit?: (values: any) => void;
}) => {
    const pageProps = usePage<{ users?: UserOption[]; statuses?: StatusOption[] }>().props;
    const users = pageProps.users || [];
    const statuses = pageProps.statuses || [];
    const handleReminderSubmit = (payload: NormalizedReminderPayload) => {
        onSubmit ? onSubmit(payload) : console.log('Adding new reminder:', payload);
        setIsAddReminderModalOpen(false);
    };

    return (
        <Sheet open={isAddReminderModalOpen} onOpenChange={setIsAddReminderModalOpen}>
            <SheetContent side="right" className="w-full sm:max-w-md flex flex-col">
                <div className="flex items-center justify-between border-b px-2 py-3">
                    <h2 className="text-xl font-semibold tracking-tight px-1">
                        {mode === 'add' ? 'Add Reminder' : 'Edit Reminder'}
                    </h2>
                    <Button variant="ghost" size="sm" onClick={() => setIsAddReminderModalOpen(false)} className="size-6 rounded-full border">
                        <X className="h-3 w-3" />
                    </Button>
                </div>
                <div className="flex-1 overflow-y-auto">
                    <ReminderForm
                        mode={mode}
                        initialReminder={initialTask}
                        onSubmitReminder={handleReminderSubmit}
                        onCancel={() => setIsAddReminderModalOpen(false)}
                        users={users}
                        statuses={statuses}
                    />
                </div>
            </SheetContent>
        </Sheet>
    );
};

export default ReminderAddModal;