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

// kind of made this not generic :(
const Toggle = ({ a, b }: { a: JSX.Element; b: JSX.Element }) => (
    <details
        class="toggle"
        style="position: relative; margin: 0; cursor: pointer;"
    >
        <summary style="list-style: none;">
            <div style="margin: 0; display: block; width: 100%; height: 100%;">
                {a}
            </div>
        </summary>
        <div style="margin: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none;">
            {b}
        </div>
    </details>
);

const Pixel = ({ color_a, color_b }: { color_a: string; color_b: string }) => (
    <Toggle
        a={
            <div
                style={{
                    backgroundColor: color_a,
                    width: "100%",
                    height: "100%",
                }}
            />
        }
        b={
            <div
                style={{
                    backgroundColor: color_b,
                    width: "100%",
                    height: "100%",
                }}
            />
        }
    />
);

render_and_copy(
    <Main>
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
        <Pixel color_a="white" color_b="black" />
    </Main>
);