/* ===================== AUTOGENERATED SOURCE IMPORT ===================== */

import Template from "/emcJS/util/html/template/HTMLTemplate.js";

const TPL = new Template(`
    <div id="marker">
        <div id="label"></div>
    </div>
`);

import GlobalStyle from "/emcJS/util/html/template/CSSTemplate.js";

const STYLE = new GlobalStyle(`
    :host {
        --scale: 100;
        --size: 48px;
        --rotation: 45deg;
        --border-radius: 25%;
        position: absolute;
        display: inline-flex;
        width: var(--size, 0px);
        height: var(--size, 0px);
        transform: translate(calc(var(--size, 0px) * -0.5), calc(var(--size, 0px) * -0.5)) rotate(var(--rotation, 0deg)) scale(calc(var(--scale, 100) / 100));
        user-select: none;
        pointer-events: all;
    }
    :host(:hover) {
        z-index: 1000;
    }
    #marker {
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        color: var(--world-connection-text-color,  #000000);
        background-color: var(--world-connection-background-color, #ffffff);
        border: solid 4px black;
        font-weight: bold;
        border-radius: var(--border-radius, 0px);
        font-size: calc(var(--size, 0px) * 0.7);
        line-height: 1em;
    }
    #label {
        transform: rotate(-45deg);
    }
`);

/* ======================================================================= */

import CustomElement from "/emcJS/ui/element/CustomElement.js";

export default class ConnectionPoint extends CustomElement {

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
    }

    set label(value) {
        this.setAttribute("label", value);
    }

    get label() {
        return this.getAttribute("label");
    }

    set top(value) {
        this.setIntAttribute("top", value);
    }

    get top() {
        return this.getIntAttribute("top");
    }

    set left(value) {
        this.setIntAttribute("left", value);
    }

    get left() {
        return this.getIntAttribute("left");
    }

    set scale(val) {
        this.setIntAttribute("scale", val);
    }

    get scale() {
        return this.getIntAttribute("scale");
    }

    static get observedAttributes() {
        return ["label", "top", "left", "scale"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case "label": {
                if (oldValue != newValue) {
                    const labelEl = this.shadowRoot.getElementById("label");
                    labelEl.innerHTML = newValue;
                }
            } break;
            case "top": {
                this.style.top = `${newValue}px`;
            } break;
            case "left": {
                this.style.left = `${newValue}px`;
            } break;
            case "scale": {
                this.style.setProperty("--scale", newValue);
            } break;
        }
    }

}

customElements.define("gt-connection-point", ConnectionPoint);
