import { Component, createEffect, createSignal } from "solid-js";
import { getContext2D } from "../../src";
import { PixelPerfectCanvas } from "../../src/solid";

const App: Component = () => {
    const [renderer, setRenderer] = createSignal(false);

    const update = (canvas: HTMLCanvasElement) => {
        const ctx = renderer() ? getContext2D(canvas) : canvas.getContext("2d");
        if (!ctx) return;
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.lineWidth = 2;
        ctx.scale(window.devicePixelRatio, window.devicePixelRatio * 1.5);
        ctx.fillStyle = "black";
        ctx.fillRect(10, 10, 10, 10);

        ctx.lineWidth = 1.5;
        ctx.strokeStyle = "rgba(0, 255, 128, 0.5)";
        ctx.strokeRect(10, 10, 5, 5);
        ctx.resetTransform();
    };

    let [canvasRef, setCanvasRef] = createSignal<HTMLCanvasElement>();
    createEffect(() => {
        const canvas = canvasRef();
        if (canvas) {
            update(canvas);
        }
    });

    return (<>
        <PixelPerfectCanvas
            style={{
                width: "100vw",
                height: "calc(100vh - 50px)",
                "margin-left": "1px",
            }}
            onResize={update}
            onAttach={setCanvasRef}
            downscale={8}
        />
        <input
            type="checkbox"
            id="use-pptk-renderer"
            onChange={(event) => setRenderer(event.currentTarget.checked)}
        />
        <label for="use-pptk-renderer">Use PPTK renderer</label>
    </>);
}

export default App;