tldrawext

import { throttle } from 'lodash'
import { useLayoutEffect, useMemo, useEffect, useState } from 'react'
import { DefaultSpinner, Tldraw, createTLStore, getSnapshot, loadSnapshot } from 'tldraw'
import 'tldraw/tldraw.css'

export const meta = {
    type: "extNode",
    componentName: "tldrawSqlite",
    extNode: {
        title: "tldrawSqlite",
        description: "This is a Tldraw extension node",
        type: "tldraw",
    },
}

export function tldrawSqlite() {
    const [content, setContent] = useState("")
    const nodeId = window.location.pathname.split("/")[1]
    const store = useMemo(() => createTLStore(), [])

    const [loadingState, setLoadingState] = useState<
        { status: 'loading' } | { status: 'ready' } | { status: 'error'; error: string }
    >({
        status: 'loading',
    })

    useLayoutEffect(() => {

        setLoadingState({ status: 'loading' })

        
        const loadData = async () => {
            try {
                const snapshot = await eidos.currentSpace.extNode.getText(nodeId);
                const drawcontents = JSON.parse(snapshot);
                //console.log(">>>>>>>READNIG>>>>>", drawcontents);
                loadSnapshot(store, drawcontents);
                setLoadingState({ status: 'ready' });
            } catch (error) {
                setLoadingState({ status: 'ready'});
                console.error("Error loading previous data: Initialize an empty document, with status ready", error);
            }
        };

        loadData();

        const cleanupFn = store.listen(
            throttle(() => {
                const snapshot = getSnapshot(store)
                const drawcontents =  JSON.stringify(snapshot)
                //console.log("<<<<<<<<WRITING<<<<<<<", drawcontents)
                eidos.currentSpace.extNode.setText(nodeId, drawcontents)
            }, 500)
        )

        return () => {
            cleanupFn()
        }
    }, [store])

    if (loadingState.status === 'loading') {
        return (
            <div className="tldraw__editor">
                <h2>
                    <DefaultSpinner />
                </h2>
            </div>
        )
    }

    /// mock for other errors output 
    if (loadingState.status === 'error') {
        return (
            <div className="tldraw__editor">
                <h2>Error!</h2>
                <p>{loadingState.error}</p>
            </div>
        )
    }

    return (
        <div className="tldraw__editor">
            <Tldraw store={store} />
        </div>
    )
}