import { toChildArray, ComponentChildren } from "preact";
import { Main, render_and_copy } from "./common.tsx";

// idea is to have buttons you can click to type out words, should be fun
// (and maybe possible)
// new idea: type out eggbug or you LOSE
const Key = ({ letter }: { letter: string }) => (
    <details class="key">
        <summary class="keycap">{letter}</summary>
        <div
            class="keyout"
            style={{ left: (sentence.indexOf(letter) ?? 0) + "em" }}
        >
            {letter}
        </div>
    </details>
);

const sentence = "cwm fjord bank glyphs vext quiz";

const KeyRow = ({ keys }: { keys: string }) => (
    <div class="keyrow">
        {...keys.split("").map(letter => <Key letter={letter} />)}
    </div>
);

const Keyboard = ({ children }: { children: ComponentChildren }) => (
    <div class="keyboard">{...toChildArray(children)}</div>
);

const Out = () => <div class="out"></div>;

render_and_copy(
    <Main>
        <Keyboard>
            <KeyRow keys="qwertyuiop" />
            <KeyRow keys="asdfghjkl" />
            <KeyRow keys="zxcvbnm" />
        </Keyboard>
        <Out />
    </Main>
);