import React from "react";
import * as Iso from "@eno/iso";
import Collapse, {CollapseButton, CollapseGroup, CollapseMenu} from "$/collapse.tsx";

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

export default ()=>
{
    const [countGet, countSet] = React.useState(1);
    return <div class="font-sans flex flex-col items-center min-h-[100vh]">
        <Iso.Meta.Metas title="Main Page!"/>
        <header class="layout-middle border-b">
            <nav class="flex gap-8 font-black text-sm">
                <a class="" href="/">Home</a>
                <a href="/about">About</a>
                <a href="/details">Details</a>
                <a href="/data">Data Fetching</a>
            </nav>
        </header>
        <div class="self-start">
            <CollapseGroup>
                <CollapseButton></CollapseButton>
                <CollapseMenu>
                    <p>collapsedable!</p>
                    <p>collapsedable!</p>
                    <p>collapsedable!</p>
                    <p>collapsedable!</p>
                    <p>collapsedable!</p>
                </CollapseMenu>
            </CollapseGroup>
        </div>
        <main class="layout-middle">
        <Iso.Switch>
            <Iso.Case value="/">
                <>
                    <Iso.Meta.Metas title="Home Page" />
                    <h1>iso: isomorphic typescript is simpler than ever.</h1>
                    <div>
                        <button></button>
                    </div>
                </>
            </Iso.Case>
            <Iso.Case value="about">
                <>
                    <h1>About</h1>
                    <p>Iso puts the Deno runtime and ES modules to work behind the scenes to turn your next single-page React+TypeScript application into an SEO capable website <em>with full hydration</em>.</p>
                    <p>The best part? It&apos;s all so simple you won't even even know it&apos;s there.</p>
                    <p>Say goodbye to stylesheets and CSS-in-JS bloat. Tailwind classes are available out of the gate so you can hit the ground running, and Iso will keep up the pace with state-preserving hot module reloading. </p>
                    <p>Batteries-included URL routing, page meta, and data fetching APIs are designed from the ground up to be as simple as possible.</p>
                    <p>Get fully featured in seconds.</p>
                </>
            </Iso.Case>
            <Iso.Case value="details">
                <div class="flex flex-col gap-y-2">
                    <h1>Details</h1>
                    <p>
                        Iso uses Preact/Compat and Twind in lieu of React and Tailwind so you can keep the API's you know, serve less kilobytes, and gain new ways to simplify your layout code.
                    </p>
                    <p>While you can always:</p>
                    <pre>
                        {`<div className="font-serif font-bold font-italic"></div>`}
                    </pre>
                    <p>Now you can just:</p>
                    <pre>
                        {`<div class="font(serif bold italic)"></div>`}
                    </pre>
                    <p>
                        Iso is a Deno project! If you're coming from a Node background be sure to:
                    </p>
                    <ol>
                        <li>Get the latest Deno runtime and extension for your IDE</li>
                        <li>Use file extensions in import statements</li>
                        <li>Add new modules to the deno.jsonc config</li>
                    </ol>
                </div>
            </Iso.Case>
            <Iso.Case value="data">
                <React.Suspense fallback={<p>Loading...</p>}>
                    <Comp/>
                </React.Suspense>
            </Iso.Case>
            <Iso.Case default><p>404!</p></Iso.Case>
        </Iso.Switch>
        </main>

        <footer class="bg-black grow w-full">
            <div class="layout-middle mx-auto text-white">
                &copy; {new Date().getFullYear()} Seth Trowbridge
            </div>
        </footer>

    </div>;
};

export const CSS = {
    rules:
    [
        ["layout-middle", "w-full max-w-4xl p-4"]
    ]
};