import { h } from "@stencil/core";
import Tunnel from '../locale/i18n.provider';
var Translations;
(function (Translations) {
    Translations["EXPAND_TRAY"] = "Expand Tray";
    Translations["COLLAPSE_TRAY"] = "Collapse Tray";
})(Translations || (Translations = {}));
export class Tray {
    constructor() {
        this.collapsed = false;
        this.collapsible = false;
    }
    componentDidLoad() {
        this.anjTrayDidLoad.emit();
    }
    onItemActive({ target }) {
        const el = target;
        const elOffset = el.offsetWidth + el.offsetLeft;
        if (elOffset > this.contentEl.scrollLeft + this.contentEl.offsetWidth) {
            this.contentEl.scrollLeft = elOffset - this.contentEl.offsetWidth;
        }
        else if (elOffset < this.contentEl.scrollLeft + this.contentEl.offsetWidth) {
            this.contentEl.scrollLeft = this.contentEl.scrollLeft - el.offsetWidth > -1 ? this.contentEl.scrollLeft - el.offsetWidth : 0;
        }
    }
    // Swallow the mouse up/down events so that this stupid thing works in modals https://git.zias.io/ui-foundation/anjuna/issues/804
    swallowEvent(e) {
        e.stopPropagation();
    }
    async toggle() {
        this.element.style.height = `${this.element.offsetHeight}px`;
        this.collapsed = !this.collapsed;
        const targetHeight = this.collapsed ? this.headerEl.offsetHeight : this.headerEl.offsetHeight + this.contentEl.offsetHeight;
        this.anjTrayCollapse.emit(targetHeight);
        this.element.style.height = `${targetHeight}px`;
    }
    render() {
        const label = this.collapsed ? this.translator(Translations.COLLAPSE_TRAY) : this.translator(Translations.EXPAND_TRAY);
        const path = this.collapsed
            ? 'M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z'
            : 'M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z';
        return [
            h("div", { class: "anj-tray-header", ref: el => this.headerEl = el },
                h("div", null,
                    h("slot", { name: "header-left" })),
                h("div", { class: "anj-tray-toggle" }, this.collapsible ?
                    h("anj-button", { context: "free", onClick: () => this.toggle(), "aria-label": label },
                        h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48" },
                            h("path", { d: path }))) : undefined),
                h("div", null,
                    h("slot", { name: "header-right" }))),
            h("div", { class: "anj-tray-content", ref: el => this.contentEl = el },
                h("slot", null))
        ];
    }
    static get is() { return "anj-tray"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["tray.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["tray.css"]
    }; }
    static get properties() { return {
        "collapsible": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "collapsible",
            "reflect": false,
            "defaultValue": "false"
        },
        "translator": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "IntlFormatFn",
                "resolved": "(value: any, variables?: any) => string",
                "references": {
                    "IntlFormatFn": {
                        "location": "import",
                        "path": "../locale/i18n.provider"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [{
                        "text": undefined,
                        "name": "internal"
                    }],
                "text": ""
            }
        }
    }; }
    static get states() { return {
        "collapsed": {}
    }; }
    static get events() { return [{
            "method": "anjTrayDidLoad",
            "name": "anjTrayDidLoad",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the tray is loaded."
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "anjTrayCollapse",
            "name": "anjTrayCollapse",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the collapsed state changes."
            },
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            }
        }]; }
    static get elementRef() { return "element"; }
    static get listeners() { return [{
            "name": "anjTrayItemActive",
            "method": "onItemActive",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "mousedown",
            "method": "swallowEvent",
            "target": undefined,
            "capture": false,
            "passive": true
        }, {
            "name": "mouseup",
            "method": "swallowEvent",
            "target": undefined,
            "capture": false,
            "passive": true
        }]; }
}
Tunnel.injectProps(Tray, ['translator']);
