import { h, Rung, RungOptions } from "@djledda/ladder";
import "./Icon.css";

import List from "assets/svgs/list.svg";
import ArrowClockwise from "assets/svgs/arrow-clockwise.svg";
import Trash from "assets/svgs/trash.svg";
import Snowflake from "assets/svgs/snowflake.svg";
import LeftHand from "assets/svgs/LH.png";
import RightHand from "assets/svgs/RH.png";
import LeftFoot from "assets/svgs/LF.png";
import RightFoot from "assets/svgs/RF.png";

const IconUrlMap = {
    arrowClockwise: ArrowClockwise,
    list: List,
    trash: Trash,
    snowflake: Snowflake,
    lh: LeftHand,
    rh: RightHand,
    lf: LeftFoot,
    rf: RightFoot,
} as const;

export type IconName = keyof typeof IconUrlMap;

export type IconViewOptions = RungOptions & {
    iconName: IconName,
    color?: string,
};

export default class IconView extends Rung<HTMLDivElement> {
    private iconUrl: string;
    private color: string | null;

    constructor(options: IconViewOptions) {
        super(options);
        this.color = options.color ?? null;
        this.iconUrl = IconUrlMap[options.iconName];
    }

    setIcon(name: IconName) {
        this.iconUrl = IconUrlMap[name];
        this.render().style.cssText = this.cssText();
    }

    cssText() {
        const colorString = this.color ? `--icon-bg:${this.color}` : "";
        return `-webkit-mask-image: url(${this.iconUrl}); mask-image: url(${this.iconUrl});${colorString ?? ''}`;
    }

    build() {
        const icon = <div className={"icon-view"} /> as HTMLDivElement;
        icon.style.cssText = this.cssText();
        return icon;
    }
}