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

var ActionDefaultFilter;
(function (ActionDefaultFilter) {
  ActionDefaultFilter["EDIT"] = "edit";
  ActionDefaultFilter["REMOVE"] = "remove";
  ActionDefaultFilter["CREATE"] = "create";
})(ActionDefaultFilter || (ActionDefaultFilter = {}));

const snkDefaultFilterCss = ".sc-snk-default-filter-h{display:flex;justify-content:flex-end}.default_container.sc-snk-default-filter{border:none;background:none;display:flex;align-items:center;gap:var(--space--3xs, 4px);font-family:var(--font-pattern);color:var(--title--primary, #2b3a54);font-size:var(--text--medium, 14px);padding:0;outline:none}.default_container.sc-snk-default-filter ez-icon.sc-snk-default-filter{cursor:pointer}.default_container.sc-snk-default-filter ez-icon.sc-snk-default-filter:hover{color:var(--color--primary-600)}.new_filter.sc-snk-default-filter{cursor:pointer;margin:0 var(--space--3xs, 4px)}.new_filter.sc-snk-default-filter:hover{color:var(--color--primary-600)}";

const SnkDefaultFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.actionSelected = createEvent(this, "actionSelected", 7);
    this.OFFSET_HEIGHT = 5;
    this.getMessage = undefined;
    this.hasDefaultFilter = false;
    this._opened = false;
  }
  repositionDropDown() {
    if (!this._refIcon || !this._refDropdown) {
      return;
    }
    const boundingIcon = this._refIcon.getBoundingClientRect();
    const boundingDropDown = this._refDropdown.getBoundingClientRect();
    this._refDropdown.style.top = (boundingIcon.y + boundingIcon.height + this.OFFSET_HEIGHT) + "px";
    this._refDropdown.style.left = ((boundingIcon.x + (boundingIcon.width / 2)) - boundingDropDown.width) + "px";
  }
  toggleDropdown() {
    this._opened = !this._opened;
  }
  closeDropdown(evt) {
    const target = evt === null || evt === void 0 ? void 0 : evt.target;
    if (!target) {
      return;
    }
    if (!target.closest("#dropdown-parent-demo")) {
      this._opened = false;
    }
  }
  buildItems() {
    return ([
      {
        id: ActionDefaultFilter.EDIT,
        label: this.getMessage('defaultFilter.edit'),
      },
      {
        id: ActionDefaultFilter.REMOVE,
        label: this.getMessage('defaultFilter.remove'),
      },
    ]);
  }
  onValueSelected({ detail: item }) {
    this._opened = false;
    this.actionSelected.emit(item.id);
  }
  openCreateNewFilter() {
    this.actionSelected.emit(ActionDefaultFilter.CREATE);
  }
  componentDidRender() {
    this.repositionDropDown();
  }
  componentWillLoad() {
    this._items = this.buildItems();
    document.removeEventListener("scroll", this.repositionDropDown.bind(this));
    document.addEventListener("scroll", this.repositionDropDown.bind(this));
  }
  render() {
    if (!this.hasDefaultFilter) {
      return (h(Host, null, h("button", { class: "default_container new_filter", onClick: this.openCreateNewFilter.bind(this) }, h("span", null, this.getMessage('defaultFilter.create')))));
    }
    return (h(Host, null, h("button", { class: "default_container", onClick: this.toggleDropdown.bind(this) }, h("span", null, this.getMessage('defaultFilter.title')), h("ez-icon", { ref: (ref) => this._refIcon = ref, iconName: 'dots-vertical' })), this._opened &&
      h("ez-dropdown", { ref: (ref) => this._refDropdown = ref, items: this._items, onEzClick: this.onValueSelected.bind(this), onEzOutsideClick: this.closeDropdown.bind(this) })));
  }
  static get style() { return snkDefaultFilterCss; }
}, [2, "snk-default-filter", {
    "getMessage": [16],
    "hasDefaultFilter": [4, "has-default-filter"],
    "_opened": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["snk-default-filter"];
  components.forEach(tagName => { switch (tagName) {
    case "snk-default-filter":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, SnkDefaultFilter);
      }
      break;
  } });
}

export { ActionDefaultFilter as A, SnkDefaultFilter as S, defineCustomElement as d };
