import { LightningElement, api } from "lwc";
import cx from "classnames";
import {
    IconSprite,
    IconSymbol,
    IconBadgeShape,
    IconSize
} from "typings/custom";
import { toDxColor } from "dxUtils/css";

const validShapes = ["square", "circle"];

export default class IconBadge extends LightningElement {
    @api sprite: IconSprite = "utility";
    @api symbol!: IconSymbol;
    @api color?: string | null = null;
    @api backgroundColor?: string;
    @api backgroundSize?: string;
    @api iconSize?: IconSize = "override";
    @api alt: string = "";

    _shape: IconBadgeShape = "circle";
    @api
    get shape() {
        return this._shape;
    }
    set shape(value) {
        if (!validShapes.includes(value)) {
            console.error(
                `[dx-icon-badge] Invalid shape provided "${value}". Shape must be type of: ${validShapes.join(
                    ", "
                )}`
            );
            this._shape = "circle";
            return;
        }
        this._shape = value;
    }

    get className() {
        return cx(
            "icon-badge",
            `shape-${this.shape}`,
            this.backgroundSize && `background-${this.backgroundSize}`
        );
    }

    get style() {
        const color = this.color
            ? `--dx-c-icon-badge-color: ${toDxColor(this.color)};`
            : "";
        const backgroundColor = this.backgroundColor
            ? `background-color: ${toDxColor(this.backgroundColor)};`
            : "";

        return `${color}${backgroundColor}`;
    }
}