import NoteForm, { NormalizedNotePayload } from '@admin/components/addOns/addon-sidebars/notes/NoteForm';
import { Sheet, SheetContent } from '@admin/components/ui/sheet';
import { X } from 'lucide-react';
import { Button } from '@admin/components/ui/button';

type Mode = 'add' | 'edit';

type NoteModalProps = {
    isAddNoteModalOpen: boolean;
    setIsAddNoteModalOpen: (open: boolean) => void;
    mode?: Mode;
    // initial values when editing
    initialNote?: any;
    onSubmit?: (note: any) => void; // called for both add and edit
};

const NoteAddModal = ({ isAddNoteModalOpen, setIsAddNoteModalOpen, mode = 'add', initialNote, onSubmit }: NoteModalProps) => {
    const handleNoteSubmit = (payload: NormalizedNotePayload) => {
        onSubmit ? onSubmit(payload) : console.log('Adding new note:', payload);
        setIsAddNoteModalOpen(false);
    };

    return (
        <Sheet open={isAddNoteModalOpen} onOpenChange={setIsAddNoteModalOpen}>
            <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 Note' : 'Edit Note'}
                    </h2>
                    <Button variant="ghost" size="sm" onClick={() => setIsAddNoteModalOpen(false)} className="size-6 rounded-full border">
                        <X className="h-3 w-3" />
                    </Button>
                </div>
                <div className="flex-1 overflow-y-auto">
                    <NoteForm mode={mode} initialNote={initialNote} onSubmitNote={handleNoteSubmit} onCancel={() => setIsAddNoteModalOpen(false)} />
                </div>
            </SheetContent>
        </Sheet>
    );
};

export default NoteAddModal;