import { Component, Element, Event, h, Listen, Prop, State } from "@stencil/core";
import { Merchant } from "@payfunc/model-acquirer";
import * as translation from "../translation";
export class IntergiroMerchantRule {
  constructor() {
    this.mode = "display";
    this.editable = true;
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  handleCancel(event) {
    this.mode = "display";
    event.stopPropagation();
  }
  handleRuleChanged(event) {
    this.edit.emit({ key: this.type, oldValue: this.value, newValue: event === null || event === void 0 ? void 0 : event.detail.value });
    this.value = event.detail.value;
    this.mode = "display";
    event === null || event === void 0 ? void 0 : event.stopPropagation();
  }
  render() {
    var _a;
    const rule = this.value ? Merchant.Rule.parse(this.value) : undefined;
    return (this.value &&
      this.value.length > 0 && [
      this.mode == "display" ? ([
        this.editable && (h("smoothly-popup", null,
          h("smoothly-icon", { name: "ellipsis-vertical-outline", size: "small" }),
          h("div", { color: "light", slot: "popup" },
            h("smoothly-icon", { size: "small", name: "pencil-outline", toolTip: this.t("Edit"), onClick: () => (this.mode = "input") }),
            h("smoothly-icon", { size: "small", name: "trash", toolTip: this.t("Delete"), onClick: () => this.delete.emit({ key: this.type, value: this.value }) })))),
        h("smoothly-display", { type: "text", value: this.value }),
      ]) : (h("ig-merchant-rule-input", { action: rule === null || rule === void 0 ? void 0 : rule.action, event: rule === null || rule === void 0 ? void 0 : rule.operation, value: (_a = rule === null || rule === void 0 ? void 0 : rule.condition) === null || _a === void 0 ? void 0 : _a.toString() })),
    ]);
  }
  static get is() { return "ig-merchant-rule"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": false
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false
    },
    "mode": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "\"display\" | \"input\"",
        "resolved": "\"display\" | \"input\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "mode",
      "reflect": true,
      "defaultValue": "\"display\""
    },
    "editable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "editable",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
  static get states() { return {
    "t": {}
  }; }
  static get events() { return [{
      "method": "delete",
      "name": "delete",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "edit",
      "name": "edit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
  static get listeners() { return [{
      "name": "cancel",
      "method": "handleCancel",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "updated",
      "method": "handleRuleChanged",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
