import { h, } from "@stencil/core";
import { PlatformServiceName, } from "@limetech/lime-web-components";
import { negate } from "lodash-es";
import { ENTER } from "../../util/keycodes";
/**
 * This component creates a UI that allows the user to easily navigate through a list of items,
 * and navigate to their respective paths.
 * The search bar also enables the user to find specific items, by typing
 * a part of their name.
 *
 * It also allows you to group the list items into titled (or untitled) groups.
 *
 * :::tip
 * While typing in the search box, the user can simply press the <kbd>Enter</kbd> key
 * to select the first item in the list.
 * This helps the user to quickly navigate to the first item, which is typically the most relevant one
 * in the search results.
 * :::
 *
 * @exampleComponent limebb-example-browser-basic
 * @exampleComponent limebb-example-browser-list-layout
 * @beta
 */
export class Browser {
    constructor() {
        /**
         * Defines the how the list of items is rendered.
         * - `grid` - Items are displayed in a responsive grid layout.
         * Width of items is adjusted to fit the available space.
         */
        this.layout = 'grid';
        this.handleChangeFilter = (event) => {
            event.stopPropagation();
            this.filter = event.detail;
        };
        this.isIncluded = (item, index) => {
            if (this.isSeparator(item)) {
                return !(index === 0 && !item.text);
            }
            if (!this.filter) {
                return true;
            }
            return item.text
                .toLocaleLowerCase()
                .includes(this.filter.toLocaleLowerCase());
        };
        this.isEmptyGroup = (item, index, items) => {
            if (!this.isSeparator(item)) {
                return false;
            }
            const nextItem = items[index + 1];
            return !nextItem || this.isSeparator(nextItem);
        };
        this.handleChange = (event) => {
            event.preventDefault();
            this.handleItemChange(event.detail);
        };
        this.handleKeyDown = (event) => {
            var _a;
            if (event.key !== ENTER) {
                return;
            }
            const list = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('limel-list');
            const interactiveItems = this.getItems().filter(negate(this.isSeparator));
            if (list && interactiveItems.length > 0) {
                list.focus();
                this.handleItemChange(interactiveItems[0]);
            }
        };
    }
    render() {
        return [
            h("limel-input-field", { key: '314fbd746ab8a22f16ac001e02056e1e5325cdb6', tabIndex: 0, value: this.filter, type: "search", "leading-icon": "search", placeholder: this.translator.get('webclient.global-search-route'), onChange: this.handleChangeFilter, onKeyDown: this.handleKeyDown }),
            h("limel-list", { key: '8be5b8bb377375d362ff441349d9131d0eec24f9', items: this.getItems(), type: "selectable", class: {
                    'has-interactive-items': true,
                    'has-grid-layout': this.layout === 'grid',
                }, onChange: this.handleChange }),
        ];
    }
    isSeparator(item) {
        return !!item && typeof item === 'object' && 'separator' in item;
    }
    get navigator() {
        return this.platform.get(PlatformServiceName.Navigator);
    }
    get translator() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(PlatformServiceName.Translate);
    }
    handleItemChange(item) {
        this.change.emit(item);
        this.filter = undefined;
        this.navigator.navigate(item.path);
    }
    getItems() {
        return this.items
            .filter(this.isIncluded)
            .filter(negate(this.isEmptyGroup));
    }
    static get is() { return "limebb-browser"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["browser.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["browser.css"]
        };
    }
    static get properties() {
        return {
            "platform": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentPlatform",
                    "resolved": "LimeWebComponentPlatform",
                    "references": {
                        "LimeWebComponentPlatform": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentPlatform",
                            "referenceLocation": "LimeWebComponentPlatform"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "context": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentContext",
                    "resolved": "LimeWebComponentContext",
                    "references": {
                        "LimeWebComponentContext": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentContext",
                            "referenceLocation": "LimeWebComponentContext"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Array<BrowserItem | ListSeparator>",
                    "resolved": "(BrowserItem | ListSeparator)[]",
                    "references": {
                        "Array": {
                            "location": "global",
                            "id": "global::Array"
                        },
                        "BrowserItem": {
                            "location": "import",
                            "path": "./browser-item.types",
                            "id": "src/components/browser/browser-item.types.ts::BrowserItem",
                            "referenceLocation": "BrowserItem"
                        },
                        "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
            },
            "layout": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'grid' | 'list'",
                    "resolved": "\"grid\" | \"list\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the how the list of items is rendered.\n- `grid` - Items are displayed in a responsive grid layout.\nWidth of items is adjusted to fit the available space."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "layout",
                "defaultValue": "'grid'"
            }
        };
    }
    static get states() {
        return {
            "filter": {}
        };
    }
    static get events() {
        return [{
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when the user selects an item in the list."
                },
                "complexType": {
                    "original": "BrowserItem",
                    "resolved": "Pick<ListItem<any>, \"text\" | \"icon\" | \"selected\" | \"value\"> & { path: string; }",
                    "references": {
                        "BrowserItem": {
                            "location": "import",
                            "path": "./browser-item.types",
                            "id": "src/components/browser/browser-item.types.ts::BrowserItem",
                            "referenceLocation": "BrowserItem"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
}
