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

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

const TPL = new Template(`
    <emc-i18n-tooltip id="tooltip">
        <button id="button">
            <slot></slot>
            <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 {
        display: flex;
        width: min-content;
        height: 2em;
        margin: 6px;
        user-select: none;
        font-size: 1rem;
        cursor: pointer;
    }
    
    :host([disabled]:not([disabled="false"])) {
        cursor: default !important;
    }
    
    :host(:focus) {
        outline: none;
        z-index: 1;
    }
    
    #button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        padding: 0px 10px;
        margin: 0px;
        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);
        appearance: none;
        font-size: 1em;
        font-weight: bold;
        line-height: 1em;
        white-space: pre;
        word-break: keep-all;
        cursor: inherit;
    }
    
    #button:disabled {
        color: var(--button-disabled-text-color, #757575) !important;
        background-color: var(--button-disabled-back-color, #999999) !important;
        background-image: var(--button-disabled-back-image, none) !important;
        border-color: var(--button-disabled-border-color, #6a6a6a) !important;
        cursor: default !important;
        pointer-events: none !important;
    }
    
    :host([slim]:not([slim="false"])) #button {
        padding: 0px 4px;
    }
    
    :host(.active) #button {
        color: var(--button-active-text-color, #ffffff);
        background-color: var(--button-active-back-color, #222222);
        background-image: var(--button-active-back-image, none);
        border-color: var(--button-active-border-color, #222222);
    }
    
    :host([primary]:not([primary="false"])) #button {
        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([secondary]:not([secondary="false"])) #button {
        color: var(--button-secondary-text-color, #000000);
        background-color: var(--button-secondary-back-color, #00dbd0);
        background-image: var(--button-secondary-back-image, none);
        border-color: var(--button-secondary-border-color, #007b75);
    }
    
    :host(:hover) #button {
        color: var(--button-hover-text-color, #ffffff);
        background-color: var(--button-hover-back-color, #353935);
        background-image: var(--button-hover-back-image, none);
        border-color: var(--button-hover-border-color, #222222);
    }
    
    :host(.active:hover) #button {
        color: var(--button-active-hover-text-color, #ffffff);
        background-color: var(--button-active-hover-back-color, #222222);
        background-image: var(--button-active-hover-back-image, none);
        border-color: var(--button-active-hover-border-color, #222222);
    }
    
    :host([primary]:not([primary="false"]):hover) #button {
        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);
        border-color: var(--button-primary-hover-border-color, #222222);
    }
    
    :host([secondary]:not([secondary="false"]):hover) #button {
        color: var(--button-secondary-hover-text-color, #ffffff);
        background-color: var(--button-secondary-hover-back-color, #353935);
        background-image: var(--button-secondary-hover-back-image, none);
        border-color: var(--button-secondary-hover-border-color, #222222);
    }
    
    :host([text-transform="lowercase"]) #button {
        text-transform: lowercase;
    }
    
    :host([text-transform="uppercase"]) #button {
        text-transform: uppercase;
    }
    
    :host([text-transform="capitalize"]) #button {
        text-transform: capitalize;
    }
    
    #button:focus,
    :host(:focus) #button {
        box-shadow: 0 0 2px 3px var(--button-focus-color, #06b5ff);
        outline: none;
    }
    
    #button::before {
        align-items: center;
        justify-content: center;
        height: 1em;
        min-width: 1em;
        font-size: 1.3em;
        line-height: 1em;
        font-family: "monospace", monospace;
        font-weight: bold;
        transform-origin: center;
    }
    
    #button[icon]::before {
        display: inline-flex;
        content: attr(icon);
    }
    
    #button[icon=""]::before {
        display: none;
    }
    
    :host([text]:not([text=""])) #button::before {
        margin-right: 5px;
    }
    
    :host(.rotate-icon-0) #button::before {
        rotate: 0deg;
    }
    
    :host(.rotate-icon-90) #button::before {
        rotate: 90deg;
    }
    
    :host(.rotate-icon-180) #button::before {
        rotate: 180deg;
    }
    
    :host(.rotate-icon-270) #button::before {
        rotate: 270deg;
    }
    
    #button[count-value]::after {
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-width: 1.4em;
        height: 1.4em;
        padding: 0 6px;
        border-radius: 0.7em;
        color: var(--button-count-text-color, #ffffff);
        background-color: var(--button-count-back-color, #222222);
        line-height: 1.2em;
        content: attr(count-value);
    }
    
    #button[count-value][count-type="alert"]::after {
        background-color: var(--button-count-alert-back-color, #e98e2d);
    }
    
    #button[count-value][count-type="info"]::after {
        background-color: var(--button-count-info-back-color, #0000ff);
    }
    
    #button[count-value][count-type="success"]::after {
        background-color: var(--button-count-success-back-color, #009952);
    }
    
    #button[count-value][count-type="error"]::after {
        background-color: var(--button-count-error-back-color, #c50000);
    }
    
    :host(:hover) #button[count-value]::after {
        color: var(--button-hover-count-text-color, #000000);
        background-color: var(--button-hover-count-back-color, #ffffff);
    }
    
    :host(:hover) #button[count-value][count-type="alert"]::after {
        background-color: var(--button-hover-count-alert-back-color, #ffd7ac);
    }
    
    :host(:hover) #button[count-value][count-type="info"]::after {
        background-color: var(--button-hover-count-info-back-color, #b9b9ff);
    }
    
    :host(:hover) #button[count-value][count-type="success"]::after {
        background-color: var(--button-hover-count-success-back-color, #aefffb);
    }
    
    :host(:hover) #button[count-value][count-type="error"]::after {
        background-color: var(--button-hover-count-error-back-color, #ffb7b7);
    }
    
    :host([border-flat~="left"]) #button {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    
    :host([border-flat~="right"]) #button {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    
    :host([border-flat~="top"]) #button {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
    
    :host([border-flat~="bottom"]) #button {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    
    :host([border-flat~="all"]) #button {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    
    :host([border-open~="left"]) #button {
        border-left-style: none;
    }
    
    :host([border-open~="right"]) #button {
        border-right-style: none;
    }
    
    :host([border-open~="top"]) #button {
        border-top-style: none;
    }
    
    :host([border-open~="bottom"]) #button {
        border-bottom-style: none;
    }
    
    :host([border-open~="all"]) #button {
        border-style: none;
    }
    
`);

const CONFIG_FIELDS = [
    {
        "type": "StringInput",
        "name": "name",
        "label": "Name",
        "value": ""
    },
    {
        "type": "StringInput",
        "name": "text",
        "label": "Text",
        "value": ""
    },
    {
        "type": "CharInput",
        "name": "icon",
        "label": "Icon",
        "value": ""
    },
    {
        "type": "TextInput",
        "name": "tooltip",
        "label": "Tooltip",
        "value": ""
    },
    {
        "type": "BoolOrLogicInput",
        "name": "enabled",
        "label": "Enabled",
        "value": true
    },
    {
        "type": "BoolOrLogicInput",
        "name": "visible",
        "label": "Visible",
        "value": true
    }
];

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

import CustomFormElementDelegating from "../../element/CustomFormElementDelegating.js";
import {deepClone} from "../../../util/helper/DeepClone.js";
import {registerFocusable} from "../../../util/helper/html/ElementFocusHelper.js";
import "../../i18n/I18nTooltip.js";
import "../../i18n/builtin/I18nInput.js";

export default class Button extends CustomFormElementDelegating {

    static get formConfigurationFields() {
        return deepClone(CONFIG_FIELDS);
    }

    #tooltipEl;

    #textEl;

    #buttonEl;

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#tooltipEl = this.shadowRoot.getElementById("tooltip");
        this.#textEl = this.shadowRoot.getElementById("text");
        this.#buttonEl = this.shadowRoot.getElementById("button");
        this.#buttonEl.addEventListener("click", (event) => this.clickHandler(event));
    }

    formDisabledCallback(disabled) {
        this.#buttonEl.disabled = disabled;
    }

    clickHandler(event) {
        event.stopPropagation();
        const ev = new MouseEvent("click", event);
        this.dispatchEvent(ev);
        return !ev.defaultPrevented;
    }

    get type() {
        return "button";
    }

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

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

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

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

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

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

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

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

    set primary(value) {
        this.setBooleanAttribute("primary", value);
    }

    get primary() {
        return this.getBooleanAttribute("primary");
    }

    set secondary(value) {
        this.setBooleanAttribute("secondary", value);
    }

    get secondary() {
        return this.getBooleanAttribute("secondary");
    }

    set slim(value) {
        this.setBooleanAttribute("slim", value);
    }

    get slim() {
        return this.getBooleanAttribute("slim");
    }

    set borderFlat(value) {
        this.setListAttribute("border-flat", value, ["all", "left", "right", "top", "bottom"]);
    }

    get borderFlat() {
        return this.getListAttribute("border-flat");
    }

    set borderOpen(value) {
        this.setListAttribute("border-open", value, ["all", "left", "right", "top", "bottom"]);
    }

    get borderOpen() {
        return this.getListAttribute("border-open");
    }

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

    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case "text": {
                if (oldValue != newValue) {
                    this.#textEl.i18nValue = newValue;
                }
            } break;
            case "icon": {
                if (oldValue != newValue) {
                    this.#buttonEl.setAttribute("icon", newValue);
                }
            } break;
            case "tooltip": {
                if (oldValue != newValue) {
                    this.#tooltipEl.i18nTooltip = newValue;
                }
            } break;
        }
    }

    setCount(value, type) {
        value = parseInt(value);
        if (!isNaN(value) && value >= 0) {
            this.#buttonEl.setAttribute("count-value", value > 99 ? "99+" : value);
        } else {
            this.#buttonEl.removeAttribute("count-value");
        }
        if (typeof type === "string" && type !== "") {
            this.#buttonEl.setAttribute("count-type", type);
        } else {
            this.#buttonEl.removeAttribute("count-type");
        }
    }

}

customElements.define("emc-button", Button);
registerFocusable("emc-button");
