import React from "react";
import * as Iso from "@eno/iso";
import * as C from "./tree-menu.tsx";

/*
const delay =(inMS:number)=>
{
    return new Promise((accept)=>
    {
        setTimeout(()=>
        {
            accept({default:()=>
            {
                return <h1>loooooool</h1>;
            }});
        }, inMS);
    });
}
const LOL = React.lazy(()=>delay(3000));
*/

const Comp = React.lazy(()=>import("./deep/component.tsx"));


export default ()=>
{

    const [stack] = React.useContext(Iso.Meta.Context);

    return <div class="p-4 font-sans">
        <Iso.Meta.Metas title="Main Page!" description="its great"/>
        <nav class="p-4">
            <a class="text-red-500" href="/">Home</a>
            <a href="/about">About</a>
        </nav>

        <C.Group>
            <C.Button></C.Button>
            <C.Menu>
            <C.Group>
                <C.Button></C.Button>
                    <C.Menu>
                        <p>hello!</p>
                        <p>hello!</p>
                        <p>hello!</p>
                        <p>hello!</p>
                        <p>hello!</p>
                        <p>hello!</p>
                        <p>hello!</p>
                    </C.Menu>
                </C.Group>
                <p>hello!</p>
                <p>hello!</p>
                <p>hello!</p>
                <p>hello!</p>

                <p>hello!</p>
                <p>hello!</p>
                <p>hello!</p>
            </C.Menu>
        </C.Group>


        <C.Group>
            <C.Button></C.Button>
            <C.Menu>
            <C.Group>
                <C.Button></C.Button>
                    <C.Menu>
                        <p>hello!</p>
                        <p>hello!</p>
                        <p>hello!</p>
                        <p>hello!</p>
                        <p>hello!</p>
                        <p>hello!</p>
                        <p>hello!</p>
                    </C.Menu>
                </C.Group>
                <p>hello!</p>
                <p>hello!</p>
                <p>hello!</p>
                <p>hello!</p>

                <p>hello!</p>
                <p>hello!</p>
                <p>hello!</p>
            </C.Menu>
        </C.Group>

        <h1 class="my-2 font(bold serif) text(3xl)">Title!!</h1>
        <h2>suspended:</h2>
        <React.Suspense fallback={<div>Loading!</div>}>
            <Comp/>
        </React.Suspense>
        <Iso.Switch>
            <Iso.Case value="/">
                <p>thing1</p>
                <p>thing2</p>
            </Iso.Case>
            <Iso.Case value="page">
                <Iso.Switch>
                    <Iso.Case value="about-us">
                        <>
                            <Iso.Meta.Metas title="About US" concatListed=" | "/>
                            About us!
                        </>
                    </Iso.Case>
                    <Iso.Case default>sorry no page</Iso.Case>
                </Iso.Switch>
            </Iso.Case>
            <Iso.Case value="lol/idk">lol/idk</Iso.Case>
            <Iso.Case default>
                <>
                    <Iso.Meta.Metas description="a 404 has occurred"/>
                    <p>404!</p>
                </>
            </Iso.Case>
        </Iso.Switch>
    </div>;
};