import {TesoftComponent} from "../scripts/main.ts";

export class TesoftTag extends TesoftComponent {
    static observedAttributes = ["href"];

    private readonly anchor: HTMLAnchorElement;

    constructor() {
        super();

        const template = document.getElementById("tesoft-tag-template") as HTMLTemplateElement;
        const templateContent = template.content;

        const shadowRoot = this.attachShadow({mode: "open"});
        shadowRoot.appendChild(templateContent.cloneNode(true));

        this.anchor = shadowRoot.querySelector<HTMLAnchorElement>("a")!;
    }

    // noinspection JSUnusedGlobalSymbols
    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
        if (name === "href") {
            this.anchor.href = newValue ?? "";
        }
    }

    set href(value: string | null) {
        if (value) {
            this.setAttribute("href", value);
        } else {
            this.removeAttribute("href");
        }
    }
}

customElements.define("tesoft-tag", TesoftTag);
