// new idea: beeg tree

import { render } from "preact-render-to-string";
import { Filler, render_and_copy } from "./common.tsx";

// there's more size savings to be had but jsx is bad for that
const Key = ({
    code,
    content,
    remaining_depth,
}: {
    code: string;
    content: string;
    remaining_depth: number;
}) => (
    <details>
        <summary>{code}</summary>
        <Screen content={content + code} remaining_depth={remaining_depth} />
    </details>
);

// toki pono or whatever that is
// oh my gosh this is such a stupid alphabet
const alphabet = "acgt";
// i went to immense pains to make it so that you have 6 characters for catcat
// nvm this isn't working

const Screen = ({
    content = "",
    remaining_depth,
}: {
    content?: string;
    remaining_depth: number;
}) =>
    remaining_depth == 0 ? (
        <div style="background:#fff;position:absolute;inset:0">{content}</div>
    ) : (
        <div style={`background:#fff;position:absolute;inset:0`}>
            {content == ""
                ? "come on do it write some dna"
                : content + ".".repeat(remaining_depth)}
            {alphabet.split("").map(c => (
                <Key
                    code={c}
                    content={content}
                    remaining_depth={remaining_depth - 1}
                />
            ))}
        </div>
    );

render_and_copy(
    <>
        <Filler height="8rem" />
        <Screen remaining_depth={5} />
    </>
);