import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e9c7ceaa.js';
import { ElementIDUtils, ObjectUtils } from '@sankhyalabs/core';
import { C as ConfigStorage } from './ConfigStorage-4eee53da.js';
import { E as EPresentationMode } from './presentationMode-783bbf9d.js';
import { F as FilterItemType } from './filter-item-type.enum-d45e026f.js';
import { F as FilterType } from './filter-type.enum-f6a8fe23.js';
import './form-config-fetcher-baa89098.js';
import './DataFetcher-955ee53e.js';
import './PrintUtils-3e4ff0f5.js';
import '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';

const snkFilterModalItemCss = ".grow{flex-grow:1}.gap{gap:4px}";

const SnkFilterModalItem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.filterChange = createEvent(this, "filterChange", 7);
    this.editPersonalizedFilter = createEvent(this, "editPersonalizedFilter", 7);
    this.addPersonalizedFilter = createEvent(this, "addPersonalizedFilter", 7);
    this.filterItem = undefined;
    this.configName = undefined;
    this.resourceID = undefined;
  }
  getContentEditorConfig() {
    const props = { presentationMode: EPresentationMode.MODAL };
    switch (this.filterItem.type) {
      case FilterItemType.BINARY_SELECT:
        return { tag: "snk-filter-binary-select", props };
      case FilterItemType.MULTI_SELECT:
        return { tag: "snk-filter-multi-select" };
      case FilterItemType.PERIOD:
        return { tag: "snk-filter-period", props };
      case FilterItemType.SEARCH:
        return { tag: "snk-filter-search" };
      case FilterItemType.NUMBER:
        return { tag: "snk-filter-number", props };
      case FilterItemType.PERSONALIZED:
        return this.buildSnkFilterPersonalizedProps();
      case FilterItemType.CHECK_BOX_LIST:
        return { tag: "snk-filter-checkbox-list", props };
      case FilterItemType.MULTI_LIST:
        return { tag: "snk-entity-list", props: { maxHeightList: "640px", rightListSlotBuilder: item => this.buildRightSlot(item) } };
    }
    return { tag: "snk-filter-text" };
  }
  buildSnkFilterPersonalizedProps() {
    return {
      tag: "snk-personalized-filter-editor", props: {
        onEditFilter: (event) => this.editPersonalizedFilter.emit(event.detail),
        onAddFilter: () => this.addPersonalizedFilter.emit(),
      }
    };
  }
  isVisible(newValue) {
    return !this.filterItem.visible ? newValue !== undefined : true;
  }
  updateFilterValue(data) {
    var _a, _b;
    const newValue = (data === null || data === void 0 ? void 0 : data.value) !== undefined ? data.value : data;
    if (this.filterItem.groupedItems != undefined) {
      this.filterItem = Object.assign(Object.assign({}, this.filterItem), { visible: newValue > 0, value: newValue, groupedItems: data.items });
    }
    else {
      this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: this.filterItem.type === (FilterItemType.SEARCH || FilterItemType.CHECK_BOX_LIST) ? data : newValue, visible: this.isVisible(newValue) });
    }
    this._editor && (this._editor["config"] = this.filterItem);
    (_b = (_a = this._editor) === null || _a === void 0 ? void 0 : _a['reloadList']) === null || _b === void 0 ? void 0 : _b.call(_a);
    this.filterChange.emit(this.filterItem);
  }
  handleDeleteFilter(filter, filterItemType) {
    if (filterItemType === FilterItemType.PERSONALIZED) {
      ConfigStorage.removePersonalizedFilter(filter, this.resourceID, this.configName);
    }
  }
  componentDidLoad() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
      const dataElementIdDoFilterItem = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
      this._idContentEditor = `${dataElementIdDoFilterItem}_${this.filterItem.id}`;
    }
  }
  buildRightSlot(item) {
    return (h("ez-icon", { iconName: "delete", onClick: () => this.removeValueFromConfig(item) }));
  }
  removeValueFromConfig(item) {
    var _a, _b, _c;
    const index = (_b = (_a = this.filterItem) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.findIndex(({ id }) => id === item.id);
    const filterItemCopy = ObjectUtils.copy(this.filterItem);
    (_c = filterItemCopy === null || filterItemCopy === void 0 ? void 0 : filterItemCopy.value) === null || _c === void 0 ? void 0 : _c.splice(index, 1);
    this.updateFilterValue(filterItemCopy.value);
  }
  canShowDetailModal() {
    const { CUSTOM_FILTER, OTHER_FILTERS } = FilterType;
    return ![CUSTOM_FILTER, OTHER_FILTERS].includes(this.filterItem.filterType) && this.filterItem.type !== FilterItemType.BINARY_SELECT;
  }
  render() {
    const { tag: ContentEditor, props } = this.getContentEditorConfig();
    return (h(Host, null, h("div", { class: "ez-flex ez-flex--column grow" }, this.canShowDetailModal() && (h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin-bottom--extra-small", htmlFor: `filter-item-${this.filterItem.id}` }, this.filterItem.detailModal)), h(ContentEditor, Object.assign({ ref: ref => this._editor = ref, id: `filter-item-${this.filterItem.id}`, config: this.filterItem, value: this.filterItem.value, onValueChanged: (event) => this.updateFilterValue(event.detail), "data-element-id": this._idContentEditor }, props)))));
  }
  get _element() { return getElement(this); }
};
SnkFilterModalItem.style = snkFilterModalItemCss;

export { SnkFilterModalItem as snk_filter_modal_item };
