import { madeWithNeedleSVG, needleLogoOnlySVG, needleLogoSVG } from "../assets/index.js";

const elementName = "needle-logo-element";

declare global {
    interface HTMLElementTagNameMap {
        "needle-logo-element": NeedleLogoElement;
    }
}

/**
 * Needle logo web component used in the hosting UI (small, compact logo or full)
 * @element needle-logo-element
 */
export class NeedleLogoElement extends HTMLElement {

    static get elementName() { return elementName; }

    static create(): NeedleLogoElement {
        if (!customElements.get(elementName))
            customElements.define(elementName, NeedleLogoElement);
        return document.createElement(elementName) as NeedleLogoElement;
    }

    private _didInitialize = false;

    constructor() {
        super();
    }

    private initializeDom() {
        this._root = this.attachShadow({ mode: 'closed' });
        const template = document.createElement('template');
        template.innerHTML = `<style>
        :host {
            position: relative;
            min-width: fit-content;
            /* height: 100%; can not have height 100% because of align-items: stretch; in the parent */
            display: flex;
        }

        .wrapper {
            position: relative;
            display: grid;
            grid-template-columns: auto auto;
            padding: .1rem;
        }
        .wrapper:hover {
            cursor: pointer;
        }
        img {
            height: 100%;
            align-self: end;
            transition: transform 0.2s;
        }
        img.with-text {
            width: 11.5ch;
            &:hover {
                transform: scale(1.02);
            }
        }
        img.compact {
            width: 1.7em;
            &:hover {
                transform: scale(1.1);
            }
        }
        span {
            font-size: 1rem;
            white-space: nowrap;
        }
        </style>
        <div class="wrapper">
            <img class="logo with-text" src=${needleLogoSVG} />
        </div>
        `;
        this._root.appendChild(template.content.cloneNode(true));
        this.wrapper = this._root.querySelector(".wrapper") as HTMLDivElement;
        this._root.appendChild(this.wrapper);
        this.logoElement = this._root.querySelector("img.logo") as HTMLImageElement;

        // this.wrapper.classList.add("wrapper");

        // this.wrapper.appendChild(this.logoElement);
        // this.logoElement.src = logoSVG;

        // this.textElement.textContent = "Needle Engine";
        // this.wrapper.appendChild(this.textElement);

        this.addEventListener("click", () => {
            globalThis.open("https://needle.tools", "_blank");
        });
    }

    private ensureInitialized() {
        if (!this._didInitialize) {
            this._didInitialize = true;
            this.initializeDom();
        }
    }

    connectedCallback() {
        this.ensureInitialized();
        if (!this.wrapper) return;
        this.wrapper.setAttribute("title", "Made with Needle Engine");
        this.setAttribute("aria-label", "Needle Engine logo. Click to open the Needle Engine website.");
    }

    private _root!: ShadowRoot;
    private wrapper!: HTMLDivElement;
    private logoElement!: HTMLImageElement;

    /** Show or hide the logo element (used by the menu) */
    setLogoVisible(val: boolean) {
        this.ensureInitialized();
        if (!this.logoElement) return;
        this.logoElement.style.display = val ? "block" : "none";
    }

    /** Switch the logo between full and compact versions */
    setType(type: "full" | "compact") {
        this.ensureInitialized();
        if (!this.logoElement) return;
        if (type === "full") {
            this.logoElement.src = needleLogoSVG;
            this.logoElement.classList.remove("with-text");
            this.logoElement.classList.remove("compact");
        } else {
            this.logoElement.src = needleLogoOnlySVG;
            this.logoElement.classList.add("with-text");
            this.logoElement.classList.add("compact");
        }
    }

}