var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { h, Fragment } from '@stencil/core';
import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
import { findParent } from '../../../../utils/ui';
import { getActiveElement } from '../../../../utils/component';
export class VegaDropdownRenderer extends VegaSlimmer {
  componentDidRender() {
    this.setVirtualContainer();
    this.appendItemsToContentBox();
    this.appendDropdownToContentBox();
  }
  getDropdownRef() {
    return this.dropdownRef;
  }
  getDropdownContentBoxRef() {
    return this.dropdownContentBoxRef;
  }
  getVirtualContainerRef() {
    return this.virtualContainerRef;
  }
  /* istanbul ignore next */
  getNextActiveItem(code) {
    const items = this.getAllItems();
    const currentActiveItem = this.getCurrentActiveItem();
    if (currentActiveItem) {
      const currentIndex = items.findIndex((item) => item === currentActiveItem);
      const nextIndex = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
      const nextItem = items[nextIndex];
      if (nextItem) {
        return nextItem.disabled ? this.findNextCallFocusItem(items, nextIndex, code) : nextItem;
      }
      else {
        return null;
      }
    }
    else {
      return items[0];
    }
  }
  render() {
    return (h(Fragment, null,
      this.renderContentSlot(),
      this.renderDropdown()));
  }
  /**
   * TODO: We will use no-named slot for both template and source render mode. And will deprecate slot dropdown-content
   */
  renderContentSlot() {
    return this.renderModeController.isSourceRenderMode() ? (h("slot", null)) : (h(Fragment, null,
      h("slot", { name: "dropdown-content" }),
      h("slot", null)));
  }
  renderDropdown() {
    const eventPreventFlag = this.host && this.host.dataset.vegaNoEventPrevent === 'true' ? 'true' : 'false';
    return (h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host, role: "dialog", "aria-modal": "true", "aria-label": "Dropdown menu list", "data-vega-no-event-prevent": eventPreventFlag },
      h("div", { ref: (e) => (this.dropdownRef = e), class: "vega-dropdown" },
        h("div", { class: "vega-dropdown-actions" },
          this.resetRenderer.render(),
          this.searchRenderer.render(),
          this.createRenderer.render()),
        h("div", null,
          h("div", { class: "vega-dropdown-container" }, this.renderModeController.isSourceRenderMode()
            ? this.listRenderer.renderBySource()
            : this.listRenderer.renderBySlot())))));
  }
  setVirtualContainer() {
    this.virtualContainerRef = this.dropdownRef.querySelector('.vega-dropdown-container');
  }
  appendItemsToContentBox() {
    if (!this.renderModeController.isSourceRenderMode()) {
      const itemsSlot = this.host.querySelector("[slot='items']");
      if (!this.dropdownContentBoxRef.contains(itemsSlot) && itemsSlot) {
        this.dropdownContentBoxRef.append(itemsSlot);
      }
    }
  }
  appendDropdownToContentBox() {
    var _a, _b;
    if (!((_a = this.dropdownContentBoxRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(this.dropdownRef))) {
      (_b = this.dropdownContentBoxRef.shadowRoot) === null || _b === void 0 ? void 0 : _b.append(this.dropdownRef);
    }
  }
  /* istanbul ignore next */
  getAllItems() {
    const virtualScroll = this.dropdownRef.querySelector('vega-virtual-scroll');
    const itemContainer = virtualScroll
      ? virtualScroll.shadowRoot
      : this.dropdownRef;
    return Array.from(itemContainer.querySelectorAll('vega-dropdown-item'));
  }
  /* istanbul ignore next */
  getCurrentActiveItem() {
    return findParent(getActiveElement(this.dropdownContentBoxRef.shadowRoot), 'vega-dropdown-item');
  }
  /* istanbul ignore next */
  findNextCallFocusItem(items, currentIndex, code) {
    const nextIndex = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
    const nextItem = items[nextIndex];
    if (nextItem) {
      return nextItem.disabled ? this.findNextCallFocusItem(items, nextIndex, code) : nextItem;
    }
    else {
      return null;
    }
  }
}
__decorate([
  MapToComponentField()
], VegaDropdownRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownRenderer.prototype, "maxHeight", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownRenderer.prototype, "searchable", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownRenderer.prototype, "createRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownRenderer.prototype, "listRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownRenderer.prototype, "renderModeController", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownRenderer.prototype, "resetRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownRenderer.prototype, "isDropdownShow", void 0);
__decorate([
  MapToComponentMethod('componentDidRender')
], VegaDropdownRenderer.prototype, "componentDidRender", null);
