'use strict';

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

const index = require('./index-1141a245.js');

const dvnFieldInputSubFormCss = "dvn-field-input-sub-form{display:block}dvn-field-input-sub-form .form-container{margin-top:calc(4 * var(--spacing-unit));position:relative}dvn-field-input-sub-form .form-container.separated{border:1px solid var(--color-border);padding:calc(4 * var(--spacing-unit));border-radius:var(--corner-radius)}dvn-field-input-sub-form .form-container .remove-input-button i,dvn-field-input-sub-form .form-container .add-input-button i{line-height:1rem}dvn-field-input-sub-form .form-container .remove-input-button{position:absolute;top:6px;left:-8px}dvn-field-input-sub-form doldurma-form{--form-min-height:0px}";

const DvnFieldInputSubForm = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.change = index.createEvent(this, "change", 7);
    this.getParentValue = () => (this.value || new Array(this.field.minCount).fill(undefined));
  }
  componentWillLoad() {
    if (this.field.maxCount === 1) {
      return;
    }
    this.subFormKeys = this.getParentValue().map(() => `${Math.random()}`);
  }
  render() {
    const { field, errors, subFormKeys, value } = this;
    const hasError = errors && errors.length > 0;
    const error = hasError ? errors[0] : undefined;
    if (field.maxCount === 1) {
      // add values to the fields
      const fieldsWithValues = field.fields.map(f => (Object.assign(Object.assign({}, f), { value: (value || {})[f.id] })));
      return (index.h(index.Host, null, index.h("div", { class: {
          'form-container': true,
          'separated': field.separated,
        } }, index.h("doldurma-form", { fields: fieldsWithValues, layout: field.layout, onChange: (event) => {
          event.stopImmediatePropagation();
          this.change.emit(event.detail);
        } })), index.h("div", null, error)));
    }
    const parentValue = this.getParentValue();
    return (index.h(index.Host, null, parentValue.map((currentChildValue, i) => {
      const fieldsWithValues = currentChildValue
        ? field.fields.map(f => (Object.assign(Object.assign({}, f), { value: currentChildValue[f.id] })))
        : field.fields;
      return (index.h("div", { key: subFormKeys[i], class: {
          'form-container': true,
          'separated': field.separated,
        } }, index.h("doldurma-form", { fields: fieldsWithValues, layout: field.layout, onChange: (event) => {
          event.stopImmediatePropagation();
          const newParentValue = [...parentValue];
          newParentValue[i] = event.detail;
          this.change.emit(newParentValue);
        } }), parentValue.length > field.minCount &&
        index.h("dvn-button", { class: "remove-input-button", shape: "circle", scale: "x-small", tint: "danger",
          // view="ghost"
          leaned: true, onClick: (e) => {
            e.stopImmediatePropagation();
            this.subFormKeys = subFormKeys.filter((_, j) => j !== i);
            this.change.emit(parentValue.filter((_, j) => j !== i));
          } }, index.h("i", { class: "uil uil-minus" }))));
    }), parentValue.length < field.maxCount &&
      index.h("dvn-button", { class: "add-input-button", shape: "circle", view: "flat", scale: "small", leaned: true, onClick: (e) => {
          e.stopImmediatePropagation();
          this.subFormKeys = [...subFormKeys, `${Math.random()}`];
          this.change.emit([...parentValue, undefined]);
        } }, index.h("i", { class: "uil uil-plus" })), index.h("div", null, error)));
  }
};
DvnFieldInputSubForm.style = dvnFieldInputSubFormCss;

exports.dvn_field_input_sub_form = DvnFieldInputSubForm;
