import { Host, h } from "@stencil/core";
export class EzpSelect {
    constructor() {
        this.backdrop = document.createElement('ezp-backdrop');
        this.containerHeight = 0;
        this.expandCover = false;
        this.expandRise = false;
        this.listHeight = 0;
        this.spacing = 6;
        this.toggleHeight = 0;
        this.wrapDiff = 0;
        this.wrapHeight = 0;
        this.wrapTop = 0;
        this.duration = 0;
        /** Description... */
        this.label = 'Label';
        /** Description... */
        this.placeholder = 'Placeholder';
        /** Description... */
        this.toggleFlow = 'horizontal';
        /** Description... */
        this.disabled = false;
        /**
         *
         * States
         *
         */
        /** Description... */
        this.expanded = false;
        /** Description... */
        this.selected = { id: false, title: '', meta: '' };
        /**
         *
         * Private methods
         *
         */
        this.toggle = () => {
            this.containerHeight = this.container.clientHeight - this.spacing * 2;
            this.listHeight = this.list.scrollHeight;
            this.wrapTop = this.component.offsetTop;
            this.wrapHeight = this.toggleHeight + this.listHeight;
            this.expandCover = this.wrapHeight > this.containerHeight;
            this.expandRise = this.wrapHeight > this.containerHeight - this.wrapTop;
            this.wrapDiff = this.containerHeight - this.wrapHeight - this.wrapTop;
            this.expanded = !this.expanded;
            this.selectToggle.emit(this.expanded);
        };
        this.select = (id) => {
            var _a;
            const delay = ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.id) === id ? 0 : this.duration * 1000;
            this.selected = this.options.find((option) => option.id === id);
            this.selectSelection.emit(this.selected);
            window.setTimeout(() => {
                this.toggle();
            }, delay);
        };
        this.preSelect = () => {
            var _a;
            this.selected = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find((option) => typeof this.preSelected === 'number'
                ? option.id === this.preSelected
                : typeof this.preSelected === 'string'
                    ? option.title === this.preSelected
                    : null);
        };
    }
    /**
     *
     * Watchers
     *
     */
    watchExpanded() {
        if (this.expandCover) {
            this.component.style.setProperty('--ezp-select-list-height', this.expanded ? `${this.containerHeight - this.toggleHeight}px` : '0px');
            this.component.style.setProperty('--ezp-select-wrap-translateY', this.expanded ? `${this.wrapTop * -1 + this.spacing}px` : '0px');
        }
        else if (this.expandRise) {
            this.component.style.setProperty('--ezp-select-list-height', this.expanded ? `${this.listHeight}px` : '0px');
            this.component.style.setProperty('--ezp-select-wrap-translateY', this.expanded ? `${this.wrapDiff + this.spacing}px` : '0px');
        }
        else {
            this.component.style.setProperty('--ezp-select-list-height', this.expanded ? `${this.listHeight}px` : '0px');
        }
        if (this.expanded) {
            this.backdrop.visible = true;
            this.container.appendChild(this.backdrop);
        }
        else {
            this.backdrop.visible = false;
        }
    }
    preSelectedChanged() {
        this.preSelect();
    }
    /**
     *
     * Lifecycle methods
     *
     */
    componentWillLoad() {
        this.container = this.component.closest('[data-backdrop-surface]');
        this.backdrop.addEventListener('backdropHideStart', () => {
            this.expanded = false;
        });
        this.backdrop.addEventListener('backdropHideEnd', () => {
            this.container.removeChild(this.backdrop);
        });
        if (this.preSelected !== undefined && this.preSelected !== '' && this.preSelected !== null) {
            this.preSelect();
        }
    }
    componentDidLoad() {
        const styles = getComputedStyle(this.component);
        this.toggleHeight = parseInt(styles.getPropertyValue('--ezp-select-toggle-height'));
        this.duration = parseFloat(styles.getPropertyValue('--ezp-select-duration'));
    }
    componentWillUpdate() {
        var _a;
        if (((_a = this.selected) === null || _a === void 0 ? void 0 : _a.id) === false &&
            this.preSelected !== undefined &&
            this.preSelected !== '' &&
            this.preSelected !== null) {
            this.preSelect();
        }
    }
    /**
     *
     * Render method
     *
     */
    render() {
        var _a, _b, _c;
        const hostClasses = [
            this.expanded ? 'is-expanded' : '',
            this.icon ? 'has-icon' : '',
            `toggle-${this.toggleFlow}`,
            this.optionFlow ? `option-${this.optionFlow}` : '',
            this.disabled ? 'disabled' : '',
        ];
        const labelLevel = this.toggleFlow === 'horizontal' ? 'secondary' : 'tertiary';
        return (h(Host, { key: '83c7b61b1b9362a970ba6813a1bb5e906ee56141', class: hostClasses.join(' ') }, h("div", { key: 'df54f1cd115d4d7ca46c6d4719909747769a0b33', id: "wrap" }, h("div", { key: 'a5beb6bdb7918ee120f7e09b70a9e0cbcd15b309', id: "toggle", onClick: () => !this.disabled && this.toggle() }, this.icon ? h("ezp-icon", { id: "icon", name: this.icon }) : null, h("ezp-label", { key: '25e7315afd533ae3aeb6455aa95cfe9acb4f8448', id: "label", noWrap: true, level: labelLevel, text: this.label }), h("ezp-label", { key: 'ed4c2a0eb21930de52b1a1b5462d2e6fb78f4c0a', id: "value", ellipsis: true, text: ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.title) !== '' ? (_b = this.selected) === null || _b === void 0 ? void 0 : _b.title : this.placeholder }), h("ezp-icon", { key: '46dacc59d23f3f8fb52181e6d23ac75ba4fd0ada', id: "accessory", name: "expand" })), h("div", { key: '0ca5ee65dc954ee6893e8f55b3529001654bb467', id: "list", ref: (element) => (this.list = element) }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => {
            var _a;
            if (option.title !== '') {
                return (h("div", { class: `option ${option.id === ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.id) ? 'is-selected' : ''} ${option.meta !== '' ? 'has-meta' : ''} `, onClick: () => this.select(option.id) }, h("ezp-icon", { name: "checkmark", class: "indicator" }), h("div", { class: "details" }, h("ezp-label", { class: "title", ellipsis: true, text: option.title }), option.meta !== '' ? (h("ezp-label", { level: "tertiary", class: "meta", text: option.meta, ellipsis: true })) : null)));
            }
        })))));
    }
    static get is() { return "ezp-select"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ezp-select.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ezp-select.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IconNameTypes",
                    "resolved": "\"account\" | \"checkmark\" | \"checkmark-alt\" | \"close\" | \"color\" | \"copies\" | \"dark\" | \"drag-drop\" | \"duplex\" | \"exclamation-mark\" | \"expand\" | \"height\" | \"help\" | \"light\" | \"logo\" | \"logout\" | \"menu\" | \"minus\" | \"orientation\" | \"paper_range\" | \"plus\" | \"printer\" | \"quality\" | \"question-mark\" | \"size\" | \"system\" | \"trays\" | \"width\"",
                    "references": {
                        "IconNameTypes": {
                            "location": "import",
                            "path": "../../shared/types",
                            "id": "src/shared/types.d.ts::IconNameTypes",
                            "referenceLocation": "IconNameTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label",
                "defaultValue": "'Label'"
            },
            "optionFlow": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "SelectFlowTypes",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {
                        "SelectFlowTypes": {
                            "location": "import",
                            "path": "../../shared/types",
                            "id": "src/shared/types.d.ts::SelectFlowTypes",
                            "referenceLocation": "SelectFlowTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "option-flow"
            },
            "options": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "SelectOptionType[]",
                    "resolved": "SelectOptionType[]",
                    "references": {
                        "SelectOptionType": {
                            "location": "import",
                            "path": "../../shared/types",
                            "id": "src/shared/types.d.ts::SelectOptionType",
                            "referenceLocation": "SelectOptionType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder",
                "defaultValue": "'Placeholder'"
            },
            "preSelected": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "pre-selected"
            },
            "toggleFlow": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "SelectFlowTypes",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {
                        "SelectFlowTypes": {
                            "location": "import",
                            "path": "../../shared/types",
                            "id": "src/shared/types.d.ts::SelectFlowTypes",
                            "referenceLocation": "SelectFlowTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "toggle-flow",
                "defaultValue": "'horizontal'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "expanded": {},
            "selected": {}
        };
    }
    static get events() {
        return [{
                "method": "selectToggle",
                "name": "selectToggle",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\nEvents"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "selectSelection",
                "name": "selectSelection",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "component"; }
    static get watchers() {
        return [{
                "propName": "expanded",
                "methodName": "watchExpanded"
            }, {
                "propName": "preSelected",
                "methodName": "preSelectedChanged"
            }];
    }
}
