import TaskForm, { NormalizedTaskPayload } from '@admin/components/addOns/addon-sidebars/tasks/TaskForm';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../ui/sheet';
import { X } from 'lucide-react';
import { Button } from '../ui/button';

type Mode = 'add' | 'edit';

const TaskAddModal = ({
    isAddTaskModalOpen,
    setIsAddTaskModalOpen,
    mode = 'add',
    initialTask,
    onSubmit,
}: {
    isAddTaskModalOpen: boolean;
    setIsAddTaskModalOpen: (open: boolean) => void;
    mode?: Mode;
    initialTask?: any;
    onSubmit?: (values: any) => void;
}) => {
    const handleAddTask = async (payload: NormalizedTaskPayload) => {
        onSubmit ? onSubmit(payload) : console.log('Adding new task:', payload);
        setIsAddTaskModalOpen(false);
    };

    return (
        <Sheet open={isAddTaskModalOpen} onOpenChange={setIsAddTaskModalOpen}>
            <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 Task' : 'Edit Task'}
                    </h2>
                    <Button variant="ghost" size="sm" onClick={() => setIsAddTaskModalOpen(false)} className="size-6 rounded-full border">
                        <X className="h-3 w-3" />
                    </Button>
                </div>
                <div className="flex-1 overflow-y-auto">
                    <TaskForm mode={mode} initialTask={initialTask} onSubmitTask={handleAddTask} onCancel={() => setIsAddTaskModalOpen(false)} />
                </div>
            </SheetContent>
        </Sheet>
    );
};

export default TaskAddModal;