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

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

const TPL = new Template(`
    <div class="container">
        <slot id="content"></slot>
    </div>
    <div id="sort-indicator"></div>
    
`);

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

const STYLE = new GlobalStyle(`
    :host {
        display: table-cell;
        padding: 0px 25px;
        color: var(--datagrid-header-text-color, #ffffff);
        text-align: center;
        vertical-align: middle;
        user-select: none;
    }
    
    .container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5em;
        margin: 0px 4px;
        overflow: hidden;
    }
    
    #content {
        position: relative;
        display: inline-block;
        font-weight: bold;
        line-height: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    :host([hidelabel]:not([hidelabel="false"])) .container {
        display: none;
    }
    
    :host([sortable]:not([sortable="false"])) {
        cursor: pointer;
    }
    
    :host([sortable]:not([sortable="false"])) .container {
        margin: 0px 24px;
        text-decoration: underline;
    }
    
    #sort-indicator {
        position: absolute;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        top: 0px;
        bottom: 0px;
        right: 0px;
        width: 24px;
        font-size: 0.7em;
        font-weight: bold;
    }
    
    #sort-indicator:hover {
        color: transparent;
    }
    
    :host([sortdir]:not([sortdir=""])) #sort-indicator {
        display: flex;
    }
    
    :host([sortdir="dec"]) #sort-indicator {
        flex-direction: column-reverse;
    }
    
    #sort-indicator:before {
        position: relative;
        display: block;
        border: solid 0.3em transparent;
        border-bottom-color: var(--datagrid-header-text-color, #ffffff);
        border-right-color: var(--datagrid-header-text-color, #ffffff);
    }
    
    :host([sortdir="inc"]) #sort-indicator:before {
        transform: translateY(0.125em) rotate(225deg);
        content: " ";
    }
    
    :host([sortdir="dec"]) #sort-indicator:before {
        transform: translateY(-0.125em) rotate(45deg);
        content: " ";
    }
    
    #sort-indicator:hover:before {
        display: none;
    }
    
    #sort-indicator:hover:after {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0px;
        bottom: 0px;
        right: 0px;
        width: 24px;
        color: var(--datagrid-header-text-color, #ffffff);
        line-height: 1em;
        content: "✖";
    }
    
`);

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

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

export default class DataGridHeaderCell extends CustomElementDelegating {

    #dataGridId;

    #sortIndicatorEl;

    constructor(dataGridId) {
        if (typeof dataGridId !== "string" || dataGridId === "") {
            throw new Error("dataGridId must be a non empty string");
        }
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#dataGridId = dataGridId;
        this.#sortIndicatorEl = this.shadowRoot.getElementById("sort-indicator");
        /* --- */
        this.addEventListener("click", (event) => {
            event.stopPropagation();
            if (this.sortable) {
                const ev = new Event("sort", {bubbles:true});
                ev.data = {columnName: this.columnName};
                this.dispatchEvent(ev);
            }
        });
        this.#sortIndicatorEl.addEventListener("click", (event) => {
            event.stopPropagation();
            if (this.sortable) {
                const ev = new Event("unsort", {bubbles:true});
                ev.data = {columnName: this.columnName};
                this.dispatchEvent(ev);
            }
        });
    }

    get dataGridId() {
        return this.#dataGridId;
    }

    set columnName(val) {
        this.setAttribute("col-name", val);
    }

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

    set sortable(val) {
        this.setBooleanAttribute("sortable", val);
    }

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

    set sortDirection(val) {
        this.setStringAttribute("sortdir", val);
    }

    get sortDirection() {
        return this.getStringAttribute("sortdir");
    }

    set sortOrder(val) {
        this.setNumberAttribute("sortorder", val, 1);
    }

    get sortOrder() {
        return this.getNumberAttribute("sortorder");
    }

    static get observedAttributes() {
        return ["col-name", "sortorder"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue != newValue) {
            switch (name) {
                case "col-name": {
                    const escapedColumnName = this.columnName.replace(/\./g, "\\.");
                    if (escapedColumnName) {
                        const styleWidth = `var(--width-${this.columnName}, 100%)`;
                        this.style.minWidth = `var(--min-width-${this.columnName}, 100%)`;
                        this.style.maxWidth = styleWidth;
                        this.style.width = styleWidth;
                    } else {
                        this.style.minWidth = "";
                        this.style.maxWidth = "";
                        this.style.width = "";
                    }
                } break;
                case "sortorder": {
                    this.#sortIndicatorEl.innerText = newValue;
                } break;
            }
        }
    }

}

customElements.define("emc-datagrid-headercell", DataGridHeaderCell);
