import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { S as Sortable } from './sortable.esm.js';
import { I as ID_AVAILABLE_FIELDS, d as defineCustomElement$2 } from './field-config2.js';
import { ArrayUtils } from '@sankhyalabs/core';
import { d as defineCustomElement$1 } from './field-item2.js';

const fieldsSelectorCss = ".sc-fields-selector-h{width:33.33333%;display:flex;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);max-width:260px}.fields-label.sc-fields-selector{display:block;font-size:16px;font-weight:500;width:100%}.fields-count.sc-fields-selector{display:block;color:#AFB6C0;font-size:14px;padding:12px 0;font-weight:400;width:100%}.fields-container.sc-fields-selector{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 220px);width:100%}.ghost.sc-fields-selector{opacity:.5;background:#c8fbe2}.filter-input.sc-fields-selector{padding-right:var(--space--2xs, 8px)}";

const FieldsSelector = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.fieldListChanged = createEvent(this, "fieldListChanged", 7);
    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()))));
  }
  get el() { return this; }
  static get style() { return fieldsSelectorCss; }
}, [2, "fields-selector", {
    "availableFields": [16],
    "dataUnit": [16],
    "messagesBuilder": [1040],
    "filterTerm": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["fields-selector", "field-config", "field-item"];
  components.forEach(tagName => { switch (tagName) {
    case "fields-selector":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, FieldsSelector);
      }
      break;
    case "field-config":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "field-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { FieldsSelector as F, defineCustomElement as d };
