Template gallery

'use client';

import { useMemo, useState } from 'react';
import { Editor, type TemplateGalleryItem } from '@docmosaic/react';
import { createDocument, createPage, type Document } from '@docmosaic/core';
import '@docmosaic/react/styles.css';

// Static templates ship with the app - keep these checked in.
const STATIC_TEMPLATES: ReadonlyArray<TemplateGalleryItem> = [
    {
        id: 'blank',
        name: 'Blank A4',
        document: createDocument({ name: 'Untitled', pageSize: 'A4', orientation: 'portrait' }),
    },
    {
        id: 'letter',
        name: 'US Letter',
        document: createDocument({ name: 'Untitled', pageSize: 'LETTER', orientation: 'portrait' }),
    },
    {
        id: 'landscape-a4',
        name: 'A4 landscape',
        document: createDocument({ name: 'Untitled', pageSize: 'A4', orientation: 'landscape' }),
    },
    {
        id: 'three-pager',
        name: 'Three pages',
        document: {
            ...createDocument({ name: 'Three-pager', pageSize: 'A4', orientation: 'portrait' }),
            pages: [createPage(), createPage(), createPage()],
            totalPages: 3,
        } as Document,
    },
];

function rememberRecent(id: string) {
    if (typeof window === 'undefined') return;
    const prev = JSON.parse(localStorage.getItem('recent-templates') ?? '[]') as string[];
    const next = [id, ...prev.filter((p) => p !== id)].slice(0, 5);
    localStorage.setItem('recent-templates', JSON.stringify(next));
}

export default function TemplatesEditor() {
    const [open, setOpen] = useState(true);
    const templates = useMemo(() => STATIC_TEMPLATES, []);

    return (
        <Editor.Root>
            {open ? (
                <div className="fixed inset-0 z-10 flex items-center justify-center bg-black/40 p-8">
                    <div className="max-w-3xl rounded-lg bg-white p-6 shadow-xl">
                        <h2 className="mb-4 text-lg font-semibold">Pick a template</h2>
                        <Editor.TemplateGallery
                            templates={templates}
                            onTemplateSelected={(t) => {
                                rememberRecent(t.id);
                                setOpen(false);
                            }}
                        />
                    </div>
                </div>
            ) : null}

            <Editor.Properties />
            <Editor.Toolbar />
            <Editor.Pages />
            <Editor.Canvas>
                <Editor.Section />
            </Editor.Canvas>
        </Editor.Root>
    );
}