'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-17105557.js');
const sortable_esm = require('./sortable.esm-b87669ab.js');
const FormConfigHelper = require('./FormConfigHelper-1e8bb464.js');
const core = require('@sankhyalabs/core');
require('./constants-6d82e405.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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.fieldListChanged = index.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 = core.ArrayUtils.applyStringFilter(this.filterTerm, this.availableFields);
    return fieldsToShow.map(field => (index.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_esm.Sortable(this.el.querySelector(`#${FormConfigHelper.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 (index.h(index.Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, index.h("span", { class: 'fields-label ez-padding-bottom--small' }, this.getMessage('snkFormConfig.availableFields.title')), index.h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: this.getMessage('snkFormConfig.availableFields.labelSearchField'), onEzChange: evt => this.filterTerm = evt.detail }), index.h("span", { class: 'fields-count' }, this.getCountText()), index.h("ez-scroller", { direction: 'vertical', activeShadow: true }, index.h("div", { id: FormConfigHelper.ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
  }
  get el() { return index.getElement(this); }
};
FieldsSelector.style = fieldsSelectorCss;

exports.fields_selector = FieldsSelector;
