import { Component, createEffect, onMount } from "solid-js";

export const WeatherGlyph: Component<{glyph: string; size?: number; tone?: "default" | "inverse"}> = (props) => {
    let canvas!: HTMLCanvasElement;
    const boxSize = () => props.size ?? 40;
    const draw = async () => {
        const size = boxSize();
        await document.fonts.load(`${Math.round(size * 0.82)}px "Daira by LTV grafika"`);
        canvas.width = size; canvas.height = size;
        const ctx = canvas.getContext("2d")!;
        ctx.clearRect(0, 0, size, size);
        ctx.font = `normal ${Math.round(size * 0.82)}px "Daira by LTV grafika"`;
        ctx.fillStyle = props.tone === "inverse" ? "#ffffff" : "#17212d";
        ctx.textAlign = "left"; ctx.textBaseline = "alphabetic";
        const metrics = ctx.measureText(props.glyph);
        const x = size / 2 + (metrics.actualBoundingBoxLeft - metrics.actualBoundingBoxRight) / 2;
        const y = size / 2 + (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2;
        ctx.fillText(props.glyph, x, y);
    };
    onMount(draw);
    createEffect(() => { props.glyph; props.tone; boxSize(); if (canvas) void draw(); });
    return <canvas ref={canvas} class="weatherGlyph" style={{width: `${boxSize()}px`, height: `${boxSize()}px`}} aria-hidden="true"/>;
};
