import { Component, Host, h, Prop, Event, State, Watch } from '@stencil/core';
export class UxplAttributeField {
  watchHandlerMenuConfig(newValue) {
    this.setDefaultType(newValue);
  }
  componentWillLoad() {
    this.setDefaultType(this.menuConfig);
  }
  setDefaultType(menuConfig) {
    const defaultType = menuConfig.options[0];
    this.selectedTypeId = menuConfig.options[0].id;
    if (defaultType.iconName) {
      this.iconName = defaultType.iconName;
    }
    else if (defaultType.iconUrl) {
      this.iconUrl = defaultType.iconUrl;
    }
  }
  handleClose(e) {
    this.uxplRemoved.emit();
    e.stopPropagation();
  }
  setActive(e) {
    this.active = e === null || e === void 0 ? void 0 : e.detail;
  }
  valueChanged(e) {
    this.selectedLabel = e.detail;
    this.emitSelected();
    e.stopPropagation();
  }
  emitSelected() {
    const newVal = { type: this.selectedTypeId, label: this.selectedLabel };
    this.uxplChanged.emit(newVal);
  }
  setMenuRef(el) {
    this.menuEl = el;
  }
  handleSelected(e) {
    this.active = false;
    if (e.detail.iconName) {
      this.iconName = e.detail.iconName;
      this.iconUrl = undefined;
    }
    else if (e.detail.iconUrl) {
      this.iconUrl = e.detail.iconUrl;
      this.iconName = undefined;
    }
    this.selectedTypeId = e.detail.id;
    this.emitSelected();
    e.stopPropagation();
  }
  handleClosed() {
    this.active = false;
  }
  render() {
    return (h(Host, null,
      h("div", { class: {
          "attribute-input": true,
          "active": this.active
        }, part: "attribute-container" },
        h("uxpl-options-menu", { ref: (el) => this.setMenuRef(el), "default-color": this.defaultColor, config: this.menuConfig, "x-position": "after", "y-position": "below", "menu-height": this.menuHeight ? this.menuHeight : "212px", onSelected: (e) => this.handleSelected(e), onClosed: () => this.handleClosed() },
          h("uxpl-icon-selector", { slot: "button", active: this.active, "icon-name": this.iconName, "icon-url": this.iconUrl, type: this.selectedTypeId, "icon-color": "#727272", part: "icon-selector", onUxplActive: (active) => this.setActive(active) })),
        h("uxpl-text-input", { placeholder: this.placeholder ? this.placeholder : "Attribute name", part: "text-input", class: "custom-text-input", onUxplChanged: (e) => this.valueChanged(e) }),
        this.showRemove ?
          h("uxpl-icon", { class: "remove-icon", icon: "pl-icon-close", color: "#727272", size: "16px", onClick: (e) => this.handleClose(e) })
          :
            undefined)));
  }
  static get is() { return "uxpl-attribute-field"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-attribute-field.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-attribute-field.css"]
  }; }
  static get properties() { return {
    "attribute": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "AttributeDef",
        "resolved": "AttributeDef",
        "references": {
          "AttributeDef": {
            "location": "import",
            "path": "../../models/attributeDef"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Definition of attribute { id: 'text', label: 'Example Attribute' }"
      }
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Placeholder used in input field"
      },
      "attribute": "placeholder",
      "reflect": false
    },
    "showRemove": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Whether to show the remove button on this attribute"
      },
      "attribute": "show-remove",
      "reflect": false
    },
    "menuHeight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Height of the popup"
      },
      "attribute": "menu-height",
      "reflect": false
    },
    "menuConfig": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "OptionsMenuConfig",
        "resolved": "OptionsMenuConfig",
        "references": {
          "OptionsMenuConfig": {
            "location": "import",
            "path": "../../models/optionsMenuConfig"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Menu config of popup"
      }
    },
    "defaultColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "default icon color for popup if not specified in model"
      },
      "attribute": "default-color",
      "reflect": false
    }
  }; }
  static get states() { return {
    "active": {},
    "iconName": {},
    "iconUrl": {}
  }; }
  static get events() { return [{
      "method": "uxplRemoved",
      "name": "uxplRemoved",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Fired when X button is clicked (typically remove field from list)"
      },
      "complexType": {
        "original": "null",
        "resolved": "null",
        "references": {}
      }
    }, {
      "method": "uxplChanged",
      "name": "uxplChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Fired when attribute type or label is changed"
      },
      "complexType": {
        "original": "AttributeDef",
        "resolved": "AttributeDef",
        "references": {
          "AttributeDef": {
            "location": "import",
            "path": "../../models/attributeDef"
          }
        }
      }
    }]; }
  static get watchers() { return [{
      "propName": "menuConfig",
      "methodName": "watchHandlerMenuConfig"
    }]; }
}
