import { createFileRoute } from "@tanstack/react-router"
import NoteCanvas from "~/components/note/note_canvas";
import { NoteHeader } from "~/components/note/note_header";
import { Editor } from "~/editor/Editor";
import { useNoteMetadata } from "~/hooks/use-metadata";
import { NoteProvider } from "~/hooks/use-note";

export const Route = createFileRoute("/app/note/$id")({
    component: RouteComponent,
})

function RouteComponent() {
    const { id } = Route.useParams();
    return (
        <NoteProvider id={id}>
            <Content id={id} />
        </NoteProvider>
    );
}

function Content(props: { id: string }) {
    const metadata = useNoteMetadata(props.id);

    switch (metadata?.get("type")) {
        case "text": return <>
            <NoteHeader id={props.id} />
            <div className="flex-shrink-0 min-h-full max-w-3xl mx-auto w-full">
                <Editor noteId={props.id} />
            </div>
        </>;
        case "canvas": return <>
            <NoteCanvas noteId={props.id} />
        </>;
        default: return null;
    }
}