import { IEditableAttribute } from "../../core/EditableAttributes.js";
import HtmlControl from "../../core/HtmlControl.js";
import { isInsideHtmlEditor } from "../../core/HtmlEditor.js";

export default class FontIcon extends HtmlControl {

    static observedAttributes = ["hex-code-point"];

    root: ShadowRoot;

    get editableAttributes(): IEditableAttribute[] {
        return [
            { name: "hex-code-point", type: "string", value: "0" },
        ];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        switch(name) {
            case "hex-code-point":
                this.updateText();
                break;
        }
    }
    

    prepare() {
        this.updateText();
    }

    updateText() {
        try {

            let root: ShadowRoot | HTMLElement;

            if (isInsideHtmlEditor(this)) {
                root = this.root ??= this.attachShadow({ mode: "closed"});
            } else {
                root = this;
            }

            root.textContent = "";

            const c = this.getAttribute("hex-code-point");
            const nodes = c.split(/[\s\,\;]/g).map((x) => parseInt(x, 16));


            const text = String.fromCodePoint(... nodes);
            root.textContent = text;
        } catch (error) {
            console.error(error);
        }
    }

}

customElements.define("font-icon", FontIcon);