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

export class TesoftProjectCard extends TesoftComponent {
    static observedAttributes = ["href", "logo-src", "title-text"];

    private readonly anchor: HTMLAnchorElement;
    private readonly logoImage: HTMLImageElement;
    private readonly heading: HTMLHeadingElement;

    constructor() {
        super();

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

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

        this.anchor = shadowRoot.querySelector<HTMLAnchorElement>("a")!;
        this.logoImage = shadowRoot.querySelector<HTMLImageElement>("img")!;
        this.heading = shadowRoot.querySelector<HTMLHeadingElement>("h4")!;
    }

    // noinspection JSUnusedGlobalSymbols
    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
        if (name === "href") {
            this.anchor.href = newValue ?? "";
        } else if (name === "logo-src") {
            this.logoImage.src = newValue ?? "";
        } else if (name === "title-text") {
            this.heading.textContent = newValue ?? "";
        }
    }
}

customElements.define("tesoft-project-card", TesoftProjectCard);
