/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { query } from 'lit/decorators.js';
import NileElement from '../internal/nile-element';
import { styles } from './nile-side-bar-action-menu.css';
import { HasSlotController } from '../internal/slot';
/**
 * A nile-side-bar-action-menu element.
 * @summary Menus provide a list of options for the user to choose from.
 *
 * @slot - The menu's content, including menu items, menu labels, and dividers.
 *
 * @event nile-select - Emitted when a menu item is selected.
 * @fires count-changed - Indicates when the count changes
 * @slot - This element has a slot
 * @csspart button - The button
 */
let NileSideBarActionMenu = class NileSideBarActionMenu extends NileElement {
    constructor() {
        super(...arguments);
        this.searchValue = '';
        this.searchWidth = 0;
        this.searchEnabled = false;
        this.customSearch = false;
        this.showNoResults = false;
        this.allowSpaceKey = false;
        this.noResultsMessage = 'No results found';
        this.hasSlotController = new HasSlotController(this, 'menu__footer', 'menu__header');
    }
    connectedCallback() {
        super.connectedCallback();
        this.setAttribute('role', 'menu');
    }
    handleClick(event) {
        const target = event.target;
        const item = target.closest('nile-menu-item');
        if (item?.hasSubMenu) {
            return;
        }
        if (!item || item.disabled) {
            return;
        }
        if (item.type === 'checkbox') {
            item.checked = !item.checked;
        }
        this.emit('nile-select', { value: item.value });
    }
    handleKeyDown(event) {
        if (event.key === 'Enter') {
            const item = this.getCurrentItem();
            event.preventDefault();
            item?.click();
        }
        if (!this.allowSpaceKey && event.key === ' ') {
            event.preventDefault();
        }
        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
            const items = this.getAllItems();
            const activeItem = this.getCurrentItem();
            let index = activeItem ? items.indexOf(activeItem) : 0;
            if (items.length > 0) {
                event.preventDefault();
                if (event.key === 'ArrowDown')
                    index++;
                else if (event.key === 'ArrowUp')
                    index--;
                else if (event.key === 'Home')
                    index = 0;
                else if (event.key === 'End')
                    index = items.length - 1;
                if (index < 0)
                    index = items.length - 1;
                if (index > items.length - 1)
                    index = 0;
                this.setCurrentItem(items[index]);
                items[index].focus();
            }
        }
    }
    handleMouseDown(event) {
        const target = event.target;
        if (this.isMenuItem(target)) {
            this.setCurrentItem(target);
        }
    }
    handleSlotChange() {
        const items = this.getAllItems();
        if (items.length > 0) {
            this.setCurrentItem(items[0]);
        }
    }
    isMenuItem(item) {
        return (item.tagName.toLowerCase() === 'nile-menu-item' ||
            ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? ''));
    }
    getAllItems() {
        return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
            if (!this.isMenuItem(el)) {
                return false;
            }
            return true;
        });
    }
    getCurrentItem() {
        return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
    }
    setCurrentItem(item) {
        const items = this.getAllItems();
        items.forEach(i => {
            i.setAttribute('tabindex', i === item ? '0' : '-1');
        });
    }
    handleSearchChange(e) {
        let items = this.getAllItems();
        let searchValue = e.target.value;
        if (this.customSearch) {
            this.emit('nile-search-value', { value: searchValue });
            return;
        }
        let counter = 0;
        items.map(curr_item => {
            this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);
            if (curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())) {
                curr_item.style.display = 'block';
                counter++;
            }
            else {
                curr_item.style.display = 'none';
            }
        });
        this.showNoResults = counter === 0;
    }
    render() {
        return html `
      <slot name="menu__pre-header" part="menu__pre-header" @click=${(e) => {
            e.stopPropagation();
        }}></slot>
      ${this.searchEnabled
            ? html `<div class="search__wrapper" part="search__wrapper">
            <nile-input
              size="medium"
              .value=${this.searchValue}
              placeholder="Search..."
              @nile-input=${this.handleSearchChange}
              part="menu__input"
              clearable
            >
              <nile-icon
                name="var(--nile-icon-search, var(--ng-icon-search-lg))"
                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                slot="suffix"
              ></nile-icon>
            </nile-input>
          </div>`
            : html ``}
      <div part="menu__items-wrapper" class="menu__items-wrapper">
        ${this.showNoResults
            ? html ` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `
            : ''}

        <slot
          name="menu__header"
          part="menu__header"
          @click=${(e) => {
            e.stopPropagation();
        }}
        ></slot>
        <slot
          class="menu__item-wrapper"
          @slotchange=${this.handleSlotChange}
          @click=${this.handleClick}
          @keydown=${this.handleKeyDown}
          @mousedown=${this.handleMouseDown}
        ></slot>
        </div>
        ${this.hasSlotController.test('menu__footer')
            ? html ` <slot
              part="menu__footer"
              name="menu__footer"
              class="menu__footer"
            ></slot>`
            : null}

    `;
    }
};
NileSideBarActionMenu.styles = styles;
__decorate([
    state()
], NileSideBarActionMenu.prototype, "searchValue", void 0);
__decorate([
    state()
], NileSideBarActionMenu.prototype, "searchWidth", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileSideBarActionMenu.prototype, "searchEnabled", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileSideBarActionMenu.prototype, "customSearch", void 0);
__decorate([
    property({ type: Boolean })
], NileSideBarActionMenu.prototype, "showNoResults", void 0);
__decorate([
    property({ type: Boolean })
], NileSideBarActionMenu.prototype, "allowSpaceKey", void 0);
__decorate([
    property({ type: String })
], NileSideBarActionMenu.prototype, "noResultsMessage", void 0);
__decorate([
    query('slot:not([name])')
], NileSideBarActionMenu.prototype, "defaultSlot", void 0);
NileSideBarActionMenu = __decorate([
    customElement('nile-side-bar-action-menu')
], NileSideBarActionMenu);
export { NileSideBarActionMenu };
export default NileSideBarActionMenu;
//# sourceMappingURL=nile-side-bar-action-menu.js.map