import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';

const taskbarActionsButtonCss = ".sc-taskbar-actions-button-h{--ez-dropdown--min-width:150px;display:flex;width:fit-content;height:fit-content}.ez-dropdown-container.sc-taskbar-actions-button{position:relative;display:inline-block}.ez-dropdown--sticky.sc-taskbar-actions-button{position:absolute;display:block;min-width:var(--ez-dropdown--min-width)}";

const TaskbarActionsButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.taskbarActionSelected = createEvent(this, "taskbarActionSelected", 7);
    this.taskbarActionsOpened = createEvent(this, "taskbarActionsOpened", 7);
    this.taskbarActionsButtonDisconnected = createEvent(this, "taskbarActionsButtonDisconnected", 7);
    this._showDropdown = false;
    this.title = undefined;
    this.enabled = undefined;
    this.actions = undefined;
  }
  async handleKeyDown(event) {
    if (event.key === 'Escape' || event.key === 'Esc') {
      await this.hideActions();
    }
  }
  async handleClose() {
    await this.hideActions();
  }
  /**
   * Exibe a lista de ações.
   */
  async showActions() {
    this._showDropdown = true;
    requestAnimationFrame(() => {
      this._element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
    });
  }
  /**
   * Esaconde a lista de ações.
   */
  async hideActions() {
    this._showDropdown = false;
  }
  /**
   * Informa se a lista de ações está aberta.
   */
  async isOpened() {
    return this._showDropdown;
  }
  controlDropdown() {
    this._showDropdown = !this._showDropdown;
  }
  loadItems() {
    return this.actions.filter(action => action !== undefined).map(action => {
      var _a;
      return {
        id: action.value,
        label: action.label,
        value: action.value,
        type: (_a = action.type) !== null && _a !== void 0 ? _a : 'item',
        children: action.children,
        iconName: action.iconName,
        subAction: action.subAction,
        group: action.group,
        disableCloseOnSelect: action.disableCloseOnSelect,
      };
    });
  }
  canShowDropdown() {
    var _a;
    return this._showDropdown && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
  }
  onSelectAction(iAction) {
    const actions = this.actions.map(action => (Object.assign(Object.assign({}, action), { id: action.value })));
    const selectedAction = this.getSelectedAction(iAction.id, actions);
    this.taskbarActionSelected.emit(selectedAction);
    if (!selectedAction.disableCloseOnSelect) {
      this._showDropdown = false;
    }
  }
  getSelectedAction(id, actions) {
    let selectedItem = null;
    for (const item of actions) {
      if (item.id === id) {
        selectedItem = item;
        break;
      }
      if (!(item === null || item === void 0 ? void 0 : item.children))
        continue;
      selectedItem = this.getSelectedAction(id, item.children);
      if (selectedItem)
        break;
    }
    return selectedItem;
  }
  dropdownItemBuilder(item, _level) {
    const itemAction = this.actions.find(action => action.value === item.id);
    if (!itemAction || !itemAction.itemBuilder) {
      return undefined;
    }
    const customContent = itemAction.itemBuilder(this._element, itemAction);
    if (typeof customContent === 'string') {
      return h("div", { innerHTML: customContent });
    }
    return customContent;
  }
  /**
   * Existem algumas actions que precisam ser inicializadas assim que o componente é carregado,
   * pois necessitam de algumas informações, como por exemplo a referência do elemento taskbar-actions-button na tela.
   * É o caso do searchColumn/searhField
   */
  initializeEagerItems() {
    var _a;
    (_a = this.actions) === null || _a === void 0 ? void 0 : _a.forEach(action => {
      var _a;
      if (action && action.eagerInitialize && action.itemBuilder) {
        (_a = action.itemBuilder) === null || _a === void 0 ? void 0 : _a.call(action, this._element, action);
      }
    });
  }
  componentDidLoad() {
    this.initializeEagerItems();
  }
  componentDidRender() {
    if (this._showDropdown) {
      this.taskbarActionsOpened.emit(this._element);
    }
  }
  disconnectedCallback() {
    this.taskbarActionsButtonDisconnected.emit();
  }
  render() {
    return (h(Host, null, h("div", { class: `${this.canShowDropdown() ? ' ez-elevation--16' : ''} ez-dropdown-container` }, h("ez-button", { title: this.title, mode: 'icon', iconName: 'dots-vertical', size: 'small', enabled: this.enabled, onClick: () => this.controlDropdown() }), this.canShowDropdown() && h("ez-dropdown", { class: `ez-dropdown--sticky`, items: this.loadItems(), onEzClick: (evt) => this.onSelectAction(evt.detail), onEzOutsideClick: () => this._showDropdown = false, itemBuilder: (item, level) => this.dropdownItemBuilder(item, level) }))));
  }
  get _element() { return this; }
  static get style() { return taskbarActionsButtonCss; }
}, [2, "taskbar-actions-button", {
    "title": [1],
    "enabled": [4],
    "actions": [16],
    "_showDropdown": [32],
    "showActions": [64],
    "hideActions": [64],
    "isOpened": [64]
  }, [[8, "keydown", "handleKeyDown"], [8, "ezOpenModal", "handleClose"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["taskbar-actions-button"];
  components.forEach(tagName => { switch (tagName) {
    case "taskbar-actions-button":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TaskbarActionsButton);
      }
      break;
  } });
}

export { TaskbarActionsButton as T, defineCustomElement as d };
