// let's game boy ! ! !
import { ComponentChild } from "preact";
import { Cycle, render_and_copy } from "./common.tsx";

const Pixel = ({
    colors,
    width_px,
}: {
    colors: [string, ...string[]];
    width_px: number;
}) => (
    <Cycle credit={false} width_px={width_px} height_px={width_px}>
        <div /*style={`width:${width_px}px;height:${width_px}px`}*/></div>
        {...colors.map(c => (
            // p saves four bytes per
            // we aren't going to get to 20x18 but less data is courteous
            <div
                // this was parsing fine without px before. so weird
                // oh we'd might as well switch back to 100% then
                // AWESOME! THAT WAS WHAT WAS MAKING THE CYCLING REALLY NICE
                style={`background:${c};width:100%;height:100%`}
            ></div>
        ))}
    </Cycle>
);

const Draw = ({
    width,
    height = width,
    pixel_width_px,
    colors,
    bg_color,
}: {
    width: number;
    height?: number;
    pixel_width_px: number;
    colors: [string, ...string[]];
    bg_color: string;
}) => (
    <div
        style={{
            display: "grid",
            gridTemplateRows: `repeat(${height}, 1fr)`,
            gridTemplateColumns: `repeat(${width}, 1fr)`,
            width: `${width * pixel_width_px}px`,
            height: `${height * pixel_width_px}px`,
            backgroundColor: bg_color,
        }}
    >
        {...new Array(width * height)
            .fill(null)
            .map(() => <Pixel width_px={pixel_width_px} colors={colors} />)}
    </div>
);
const Shell = ({ children }: { children: ComponentChild }) => (
    <div class="shell">{children}</div>
);

// https://www.color-hex.com/color-palette/26401
// body: "#aaaaaa"
render_and_copy(
    <Draw
        // the actual aspect ratio
        // it has slightly more pixels though
        width={10}
        height={9}
        pixel_width_px={20}
        colors={["#8bac0f", "#306230", "#0f380f"]}
        bg_color="#9bbc0f"
    />
);