import { forceUpdate, h, Host } from '@stencil/core';
import { getIconName } from '../FormConfigHelper';
export class FieldItem {
  constructor() {
    this.fieldDescriptor = undefined;
    this.fieldConfig = undefined;
    this.onLayoutConfig = false;
    this.dataUnit = undefined;
    this.messagesBuilder = undefined;
  }
  observeDataUnit() {
    this.loadFieldDescriptor();
  }
  isRequired() {
    var _a, _b;
    const fieldMD = this.dataUnit && this.dataUnit.getField((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
    return (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.required) === true || ((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.required) === true;
  }
  async showFieldConfig() {
    var _a;
    await ((_a = this._refFieldConfig) === null || _a === void 0 ? void 0 : _a.show(this._editIconRef));
  }
  renderFieldConfig() {
    if (this.onLayoutConfig && this.dataUnit && this.messagesBuilder) {
      return (h("field-config", { ref: (ref) => this._refFieldConfig = ref, fieldConfig: this.fieldConfig, dataUnit: this.dataUnit, fieldDescriptor: this.fieldDescriptor, messagesBuilder: this.messagesBuilder, onFieldConfigChanged: () => forceUpdate(this) }));
    }
  }
  getMessage(key, params) {
    return this.messagesBuilder.getMessage(key, params);
  }
  renderActions() {
    if (this.onLayoutConfig) {
      return (h("div", { class: 'actions hiddeble' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.setFieldAsAvailable.emit(this.fieldConfig), size: "medium", iconName: 'minus', title: this.getMessage('snkFieldConfig.titleRemove') }), h("ez-button", { ref: ref => this._editIconRef = ref, mode: "icon", class: "ez-button--tertiary", onClick: this.showFieldConfig.bind(this), iconName: 'edit', size: "medium", title: this.getMessage('snkFieldConfig.titleEdit') })));
    }
    return (h("div", { class: 'actions hiddeble' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.addFieldToGuide.emit(this.fieldConfig), iconName: 'plus', size: "medium", title: this.getMessage('snkFieldConfig.titleAddToLayout') })));
  }
  loadFieldDescriptor() {
    if (this.dataUnit) {
      this.fieldDescriptor = this.dataUnit.getField(this.fieldConfig.name);
    }
  }
  renderRequiredMark() {
    if (this.isRequired())
      return h("span", { class: 'required-mark' }, "*");
  }
  componentWillLoad() {
    this.loadFieldDescriptor();
  }
  getFieldLabel() {
    var _a, _b;
    if ((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.label)
      return this.fieldConfig.label;
    return (_b = this.fieldDescriptor) === null || _b === void 0 ? void 0 : _b.label;
  }
  render() {
    var _a;
    return (h(Host, { class: !this.onLayoutConfig ? 'full-width' : "" }, h("div", { class: 'icons' }, h("ez-icon", { iconName: "drag-indicator" }), h("ez-icon", { iconName: getIconName((_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) })), h("span", { class: 'label' }, h("span", { class: 'label-text', title: this.getFieldLabel() }, this.getFieldLabel()), this.renderRequiredMark()), this.renderActions(), this.renderFieldConfig()));
  }
  static get is() { return "field-item"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() {
    return {
      "$": ["field-item.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["field-item.css"]
    };
  }
  static get properties() {
    return {
      "fieldConfig": {
        "type": "any",
        "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": ""
        },
        "attribute": "field-config",
        "reflect": false
      },
      "onLayoutConfig": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "on-layout-config",
        "reflect": false,
        "defaultValue": "false"
      },
      "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": true,
        "docs": {
          "tags": [],
          "text": ""
        }
      }
    };
  }
  static get states() {
    return {
      "fieldDescriptor": {}
    };
  }
  static get events() {
    return [{
        "method": "setFieldAsAvailable",
        "name": "setFieldAsAvailable",
        "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"
            }
          }
        }
      }, {
        "method": "addFieldToGuide",
        "name": "addFieldToGuide",
        "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 watchers() {
    return [{
        "propName": "dataUnit",
        "methodName": "observeDataUnit"
      }];
  }
}
