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

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

const TPL = new Template(`
    <emc-i18n-tooltip id="tooltip">
        <button id="container">
            <div id="icon-background">
                <div id="icon"></div>
            </div>
            <emc-i18n-label id="text"></emc-i18n-label>
        </button>
    </emc-i18n-tooltip>
`);

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

const STYLE = new GlobalStyle(`
    :host {
        width: calc(var(--icon-preview-size, 100px) + 20px);
        height: calc(var(--icon-preview-size, 100px) + 50px);
        color: var(--button-text-color, #000000);
        background-color: var(--button-back-color, #eaeaea);
        background-image: var(--button-back-image, none);
        border-style: solid;
        border-width: var(--button-border-width, 2px);
        border-color: var(--button-border-color, #222222);
        border-radius: var(--button-border-radius, 6px);
        user-select: none;
        overflow: hidden;
    }
    
    :host(:focus) {
        box-shadow: 0 0 2px 3px var(--input-focus-color, #06b5ff);
        outline: none;
    }
    
    #container {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        appearance: none;
        cursor: pointer;
    }
    
    #container:hover {
        color: var(--button-hover-text-color, #ffffff);
        background-color: var(--button-hover-back-color, #353935);
        background-image: var(--button-hover-back-image, none);
    }
    
    :host(.selected) #container {
        color: var(--button-primary-text-color, #000000);
        background-color: var(--button-primary-back-color, #00dbd0);
        background-image: var(--button-primary-back-image, none);
        border-color: var(--button-primary-border-color, #007b75);
    }
    
    :host(.selected) #container:hover {
        color: var(--button-primary-hover-text-color, #ffffff);
        background-color: var(--button-primary-hover-back-color, #353935);
        background-image: var(--button-primary-hover-back-image, none);
    }
    
    #icon-background {
        width: var(--icon-preview-size, 100px);
        height: var(--icon-preview-size, 100px);
        background-color: var(--input-back-color, #ffffff);
        background-image:
            linear-gradient(45deg, var(--image-checker-back-color) 25%, transparent 25%),
            linear-gradient(-45deg, var(--image-checker-back-color) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--image-checker-back-color) 75%),
            linear-gradient(-45deg, transparent 75%, var(--image-checker-back-color) 75%);
        background-size: 10px 10px;
        background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    }
    
    #icon {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-origin: content-box;
        pointer-events: none;
    }
    
    #text {
        width: 100%;
        overflow: hidden;
        white-space: pre;
        text-overflow: ellipsis;
    }
    
`);

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

import CustomFormElementDelegating from "../../../../../element/CustomFormElementDelegating.js";

export default class ImageSelectPreview extends CustomFormElementDelegating {

    #iconEl;

    #textEl;

    #tooltipEl;

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#iconEl = this.shadowRoot.getElementById("icon");
        this.#textEl = this.shadowRoot.getElementById("text");
        this.#tooltipEl = this.shadowRoot.getElementById("tooltip");
    }

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

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

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

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

    static get observedAttributes() {
        return ["value", "text"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case "value": {
                if (oldValue != newValue) {
                    this.#iconEl.style.backgroundImage = `url("${newValue}")`;
                }
            } break;
            case "text": {
                if (oldValue != newValue) {
                    this.#textEl.i18nValue = newValue;
                    this.#tooltipEl.i18nTooltip = newValue;
                }
            } break;
        }
    }

    get comparatorText() {
        return this.#textEl.innerText;
    }

    static create(value, label = value) {
        const el = new ImageSelectPreview();
        el.value = value;
        el.src = value;
        el.text = label;
        return el;
    }

}

customElements.define("emc-select-image-preview", ImageSelectPreview);
