import { ESCAPE } from "../../util/keycodes";
import { h, Host, } from "@stencil/core";
/**
 * Text editor picker
 * This component displays a list of items that will be displayed in a popover,
 * in connection with the text editor's user interface.
 *
 * This popover is triggered and opened, when the end-user types a certain character.
 * The list is unfiltered first, but as the end-user types more characters, the list
 * gets filtered to only show items that match the user's input.
 *
 * Pressing <kbd>Esc</kbd> will dismiss the popover, allowing the end-user to
 * continue typing without being forced to select something from the list.
 *
 * @private
 */
export class TextEditorPicker {
    constructor() {
        /**
         * List of items to display
         */
        this.items = [];
        /**
         * Open state  of the item's list
         */
        this.open = false;
        /**
         * Loading state of the item's list
         */
        this.isSearching = false;
        this.emptyMessage = '';
        this.handleCancel = (event) => {
            if (event instanceof KeyboardEvent && event.key !== ESCAPE) {
                return;
            }
            event.stopPropagation();
            event.preventDefault();
            this.cancel.emit();
        };
        this.selectOnInteract = (event) => {
            event.stopPropagation();
            event.preventDefault();
            this.itemSelected.emit(event.detail);
        };
    }
    watchOpen(newValue) {
        if (newValue === true) {
            this.setupHandlers();
        }
        else if (newValue === false) {
            this.teardownHandlers();
        }
    }
    connectedCallback() {
        if (this.open) {
            this.setupHandlers();
        }
    }
    disconnectedCallback() {
        this.teardownHandlers();
    }
    setupHandlers() {
        this.host.addEventListener('keyup', this.handleCancel);
    }
    teardownHandlers() {
        if (this.host) {
            this.host.removeEventListener('keyup', this.handleCancel);
        }
    }
    render() {
        if (this.items.length === 0) {
            if (this.isSearching) {
                return this.renderSpinner();
            }
            return (h(Host, { onMouseDown: this.handleMouseDown }, h("limebb-empty-state", { value: this.emptyMessage, icon: {
                    name: 'search_more',
                    color: 'rgb(var(--contrast-800))',
                } })));
        }
        return (h(Host, { onMouseDown: this.handleMouseDown }, [
            h("div", null, h("limel-list", { type: "selectable", items: this.getItems(), onInteract: this.selectOnInteract }), h("div", { class: "spinner-in-list" }, this.renderSpinner())),
        ]));
    }
    renderSpinner() {
        if (this.isSearching) {
            return h("limel-spinner", { size: "small", class: "search-spinner" });
        }
    }
    handleMouseDown(event) {
        event.preventDefault();
    }
    getItems() {
        return this.items.map((item) => {
            if ('separator' in item) {
                return item;
            }
            return Object.assign(Object.assign({}, item), { disabled: item.disabled || this.isSearching });
        });
    }
    static get is() { return "limebb-text-editor-picker"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["text-editor-picker.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["text-editor-picker.css"]
        };
    }
    static get properties() {
        return {
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Array<ListItem | ListSeparator>",
                    "resolved": "(ListSeparator | ListItem<any>)[]",
                    "references": {
                        "Array": {
                            "location": "global",
                            "id": "global::Array"
                        },
                        "ListItem": {
                            "location": "import",
                            "path": "@limetech/lime-elements",
                            "id": "node_modules::ListItem",
                            "referenceLocation": "ListItem"
                        },
                        "ListSeparator": {
                            "location": "import",
                            "path": "@limetech/lime-elements",
                            "id": "node_modules::ListSeparator",
                            "referenceLocation": "ListSeparator"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "List of items to display"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "open": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Open state  of the item's list"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "open",
                "defaultValue": "false"
            },
            "isSearching": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Loading state of the item's list"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-searching",
                "defaultValue": "false"
            },
            "emptyMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "empty-message",
                "defaultValue": "''"
            }
        };
    }
    static get events() {
        return [{
                "method": "cancel",
                "name": "cancel",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the list is closed from inside the component.\n(*Not* emitted when the consumer sets the `open`-property to `false`.)"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "itemSelected",
                "name": "itemSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "ListItem",
                    "resolved": "ListItem<any>",
                    "references": {
                        "ListItem": {
                            "location": "import",
                            "path": "@limetech/lime-elements",
                            "id": "node_modules::ListItem",
                            "referenceLocation": "ListItem"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "open",
                "methodName": "watchOpen"
            }];
    }
}
