import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b7735e0d.js';
import { a as generateFilters, b as getDefaultFilterValues } from './util-a7d61f60.js';
import { R as ResponsiveUIHelper, a as ResponsiveSize } from './ui-c7f31f6f.js';
import { M as MultipleChoiceField } from './index-1d3efe49.js';
import { S as SingleChoiceField } from './index-80ec23ef.js';
import { T as TextField } from './index-403101cb.js';
import './filter-cbaa3d7d.js';
import './BaseField-461b6d0c.js';

const defaultInputWidth = '100px';
function generateInput(config, field, values, onTextChange, onNonTextFieldChange, layout = 'horizontal', style = {}) {
  var _a;
  const areInputsLeaned = layout === 'horizontal';
  const value = field.value || values[field.id];
  const fieldUIConfig = (_a = config.fieldUIConfigs) === null || _a === void 0 ? void 0 : _a.find(fieldUIConfig => fieldUIConfig.fieldId === field.id);
  switch (field.type) {
    case TextField.type:
      const inputStyle = layout === 'horizontal'
        ? { marginRight: 'calc(1.5 * var(--spacing-unit))' }
        : { display: 'flex', flex: '1' };
      return (h("dvn-input", { enableClear: true, leaned: areInputsLeaned, onChange: (e) => onTextChange(field.id, e.detail), placeholder: field.title, width: layout === 'horizontal' ? ((fieldUIConfig === null || fieldUIConfig === void 0 ? void 0 : fieldUIConfig.width) || defaultInputWidth) : 'inherit', overrideStyle: Object.assign(Object.assign({}, inputStyle), style), value: value }));
    case SingleChoiceField.type:
      if (!field.dataAdapter) {
        return (h("dvn-select", { enableClear: true, enableSearch: true, leaned: areInputsLeaned, onChange: (e) => onNonTextFieldChange(field.id, e.detail), width: layout === 'horizontal' ? ((fieldUIConfig === null || fieldUIConfig === void 0 ? void 0 : fieldUIConfig.width) || defaultInputWidth) : 'inherit', style: Object.assign({ marginRight: 'calc(1.5 * var(--spacing-unit))' }, style), value: value }, h("dvn-select-option", null, field.title), field.options.map(option => (h("dvn-select-option", { value: option.value }, option.label)))));
      }
      // options will be rendered by the data adapter and provider
      return (h("dvn-select", { enableClear: true, enableSearch: true, leaned: areInputsLeaned, dataAdapter: field.dataAdapter, dataProvider: field.dataProvider, onChange: (e) => onNonTextFieldChange(field.id, e.detail), width: layout === 'horizontal' ? ((fieldUIConfig === null || fieldUIConfig === void 0 ? void 0 : fieldUIConfig.width) || defaultInputWidth) : 'inherit', style: Object.assign({ marginRight: 'calc(1.5 * var(--spacing-unit))' }, style), value: value }, h("dvn-select-option", null, field.title)));
    case MultipleChoiceField.type:
      return (h("dvn-select", { enableClear: true, enableSearch: true, leaned: areInputsLeaned, onChange: (e) => onNonTextFieldChange(field.id, e.detail), width: layout === 'horizontal' ? ((fieldUIConfig === null || fieldUIConfig === void 0 ? void 0 : fieldUIConfig.width) || defaultInputWidth) : 'inherit', style: Object.assign({ marginRight: 'calc(1.5 * var(--spacing-unit))' }, style), value: value }, h("dvn-select-option", null, field.title), field.options.map(option => (h("dvn-select-option", { value: option.value }, option.label)))));
  }
}
function generateInputs(config, filterFields, values, onTextChange, onNonTextFieldChange, layout = 'horizontal') {
  return filterFields.map(field => generateInput(config, field, values, onTextChange, onNonTextFieldChange, layout));
}
let DvnFilterSimple = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.filterChange = createEvent(this, "filterChange", 7);
    this.filterValues = { text: '' };
    this.showInputsDialog = false;
    this.lastFilterItemIndexToShow = 0;
    this.leaned = false;
    this.placeholder = 'Quick search';
    this.progressing = false;
    this.onSizeChange = (size) => {
      this.size = size;
    };
    // Calculate the widths of the inputs and trim the remaining ones
    this.onWidthChange = (width) => {
      var _a;
      // start from 100 for filter button and progress
      let totalWidth = 100;
      let lastFilterItemIndexToShow = 0;
      for (let i = 0; i < this.config.fields.length; i++) {
        const fieldId = this.config.fields[i].fieldId;
        const fieldUIConfig = (_a = this.config.fieldUIConfigs) === null || _a === void 0 ? void 0 : _a.find(fieldUIConfig => fieldUIConfig.fieldId === fieldId);
        const fieldWidth = (fieldUIConfig === null || fieldUIConfig === void 0 ? void 0 : fieldUIConfig.width) || defaultInputWidth;
        const fieldWidthNumberValue = parseInt(fieldWidth, 10);
        totalWidth += fieldWidthNumberValue;
        if (totalWidth > width) {
          break;
        }
        lastFilterItemIndexToShow = i;
        // add the right margin
        totalWidth += 6;
      }
      this.lastFilterItemIndexToShow = lastFilterItemIndexToShow;
    };
    this.onNonTextFieldChange = (fieldId, value) => {
      if (value) {
        this.filterValues = Object.assign(Object.assign({}, this.filterValues), { [fieldId]: value });
      }
      else {
        // value is cleared
        const filterValues = Object.assign({}, this.filterValues);
        delete filterValues[fieldId];
        this.filterValues = filterValues;
      }
      this.filterChange.emit({ filter: generateFilters(this.filterFields, this.filterValues) });
    };
    this.onTextChange = (fieldId, value) => {
      if (value) {
        this.filterValues = Object.assign(Object.assign({}, this.filterValues), { [fieldId]: value });
      }
      else {
        // value is cleared
        const filterValues = Object.assign({}, this.filterValues);
        delete filterValues[fieldId];
        this.filterValues = filterValues;
      }
      clearTimeout(this.quickSearchDelayTimer);
      this.quickSearchDelayTimer = setTimeout(() => {
        this.filterChange.emit({ filter: generateFilters(this.filterFields, this.filterValues) });
      }, 500);
    };
  }
  componentWillLoad() {
    this.uiHelper = new ResponsiveUIHelper(this.el, this.onSizeChange, this.onWidthChange);
    const { config, fields } = this;
    this.filterFields = config.fields.map(fieldConfig => fieldConfig.field || fields.find(f => f.id === fieldConfig.fieldId));
    this.filterValues = getDefaultFilterValues(config, fields);
  }
  render() {
    const { size } = this;
    const showMobileUI = size < ResponsiveSize.Small;
    if (showMobileUI) {
      // render the first filter input and show the filter button for the rest
      return (h(Host, { class: "d-block" }, h("div", { class: "d-flex" }, h("dvn-input-group", { leaned: true, overrideStyle: { flex: '1' } }, generateInput(this.config, this.filterFields[0], this.filterValues, this.onTextChange, this.onNonTextFieldChange, 'horizontal', {
        display: 'flex',
        flex: '1'
      }), this.filterFields.length > 1 &&
        h("dvn-icon-button", { tint: "primary", onClick: () => this.showInputsDialog = true, progressing: this.progressing, "icon-name": "uil uil-filter" }))), h("dvn-dialog", { clip: false, shown: this.showInputsDialog, onDismiss: () => this.showInputsDialog = false }, h("div", { class: "d-flex flex-column" }, generateInputs(this.config, this.filterFields, this.filterValues, this.onTextChange, this.onNonTextFieldChange, 'vertical')))));
    }
    const isTrimmingFields = this.lastFilterItemIndexToShow + 1 < this.filterFields.length;
    const expandedFields = [...this.filterFields].slice(0, this.lastFilterItemIndexToShow + 1);
    return (h(Host, { class: "d-flex justify-content-end" }, generateInputs(this.config, expandedFields, this.filterValues, this.onTextChange, this.onNonTextFieldChange), isTrimmingFields &&
      h("div", { class: "d-flex", style: { marginRight: 'calc(2 * var(--spacing-unit))' } }, h("dvn-button", { leaned: true, tint: "primary", onClick: () => this.showInputsDialog = true }, h("dvn-icon", { "icon-name": "uil uil-filter" }))), this.progressing &&
      h("div", { style: { display: 'flex', alignItems: 'center' } }, h("dvn-progress", { indefinite: true, leaned: true, tint: "primary", scale: "small" })), h("dvn-dialog", { clip: false, shown: this.showInputsDialog, onDismiss: () => this.showInputsDialog = false }, h("div", { class: "d-flex flex-column" }, generateInputs(this.config, this.filterFields, this.filterValues, this.onTextChange, this.onNonTextFieldChange, 'vertical')))));
  }
  get el() { return getElement(this); }
};

export { DvnFilterSimple as dvn_filter_simple };
