import { h, Host } from '@stencil/core';
import Sortable from 'sortablejs';
import { ID_AVAILABLE_FIELDS } from '../FormConfigHelper';
import { ArrayUtils } from '@sankhyalabs/core';
export class FieldsSelector {
  constructor() {
    this.availableFields = [];
    this.dataUnit = undefined;
    this.filterTerm = '';
    this.messagesBuilder = undefined;
  }
  onAddField(evt) {
    const newIndex = evt.newIndex;
    const item = evt.item;
    const fieldConfig = item.fieldConfig;
    const updatedFields = this.addItemInPosition(newIndex, fieldConfig);
    this.fieldListChanged.emit(updatedFields);
  }
  addItemInPosition(newIndex, fieldConfig) {
    return [
      ...this.availableFields.slice(0, newIndex),
      fieldConfig,
      ...this.availableFields.slice(newIndex),
    ];
  }
  onRemoveField(evt) {
    const item = evt.item;
    const fieldName = item.fieldConfig.name;
    const updatedFields = [...this.availableFields.filter(f => f.name !== fieldName)];
    this.fieldListChanged.emit(updatedFields);
    requestAnimationFrame(() => item.remove());
    return;
  }
  renderFields() {
    const fieldsToShow = ArrayUtils.applyStringFilter(this.filterTerm, this.availableFields);
    return fieldsToShow.map(field => (h("field-item", { key: field.name, dataUnit: this.dataUnit, fieldConfig: field, messagesBuilder: this.messagesBuilder })));
  }
  getCountText() {
    if (!this.availableFields.length)
      return this.getMessage('snkFormConfig.availableFields.labelNoFields');
    if (this.availableFields.length === 1)
      return this.getMessage('snkFormConfig.availableFields.labelOneField');
    return `${this.availableFields.length} ${this.getMessage('snkFormConfig.availableFields.labelAvailableFields')}`;
  }
  initializeDraggableContainer() {
    new Sortable(this.el.querySelector(`#${ID_AVAILABLE_FIELDS}`), {
      group: 'fields',
      direction: 'vertical',
      ghostClass: 'ghost',
      animation: 15,
      onAdd: (evt) => this.onAddField(evt),
      onRemove: (evt) => this.onRemoveField(evt),
    });
  }
  getMessage(key, params) {
    var _a;
    return (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params);
  }
  componentDidRender() {
    this.initializeDraggableContainer();
  }
  render() {
    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, this.getMessage('snkFormConfig.availableFields.title')), h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: this.getMessage('snkFormConfig.availableFields.labelSearchField'), onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
  }
  static get is() { return "fields-selector"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() {
    return {
      "$": ["fields-selector.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["fields-selector.css"]
    };
  }
  static get properties() {
    return {
      "availableFields": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "IFieldConfig[]",
          "resolved": "IFieldConfig[]",
          "references": {
            "IFieldConfig": {
              "location": "import",
              "path": "@sankhyalabs/ezui/src/utils/interfaces/IFieldConfig"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "defaultValue": "[]"
      },
      "dataUnit": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "DataUnit",
          "resolved": "DataUnit",
          "references": {
            "DataUnit": {
              "location": "import",
              "path": "@sankhyalabs/core"
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": ""
        }
      },
      "messagesBuilder": {
        "type": "unknown",
        "mutable": true,
        "complexType": {
          "original": "SnkMessageBuilder",
          "resolved": "SnkMessageBuilder",
          "references": {
            "SnkMessageBuilder": {
              "location": "import",
              "path": "../../../lib/message/SnkMessageBuilder"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        }
      }
    };
  }
  static get states() {
    return {
      "filterTerm": {}
    };
  }
  static get events() {
    return [{
        "method": "fieldListChanged",
        "name": "fieldListChanged",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "IFieldConfig[]",
          "resolved": "IFieldConfig[]",
          "references": {
            "IFieldConfig": {
              "location": "import",
              "path": "@sankhyalabs/ezui/src/utils/interfaces/IFieldConfig"
            }
          }
        }
      }];
  }
  static get elementRef() { return "el"; }
}
