import { Component, Host, h, Prop } from '@stencil/core';
export class UxplMilestone {
  get iconPos() {
    var _a;
    if (this.isFirst) {
      return 'start';
    }
    else if (this.isLast && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.isTerminal)) {
      return 'end';
    }
    else {
      return 'middle';
    }
  }
  get msWidth() {
    if (this.small) {
      if (this.isFirst || this.isLast) {
        return '75px';
      }
      else {
        return '130px';
      }
    }
    else {
      if (this.isFirst || this.isLast) {
        return '94px';
      }
      else {
        return '164px';
      }
    }
  }
  get miniIcon() {
    var _a;
    // current, completed, pending
    switch ((_a = this.config) === null || _a === void 0 ? void 0 : _a.status) {
      case "Pending" /* Pending */:
        return 'pending';
      case "InProgress" /* InProgress */:
        return 'current';
      case "Completed" /* Completed */:
        if (this.config.isTerminal) {
          return 'terminal-completed';
        }
        else {
          return 'completed';
        }
      case "Revisited" /* Revisited */:
        return 'revisited';
    }
  }
  get iconHeight() {
    if (this.small) {
      return '27px';
    }
    else {
      return '36px';
    }
  }
  get milestoneLabelClass() {
    let classes;
    if (this.isFirst) {
      classes = 'milestone-text first';
    }
    else {
      classes = 'milestone-text';
    }
    if (this.small) {
      classes = classes + ' small';
    }
    if (this.isFirst) {
      classes = classes + ' first';
    }
    if (this.isLast) {
      classes = classes + ' last';
    }
    return classes;
  }
  get showState() {
    /* always show state when hideTerminal false
    *  when hideTerminal true:
    *   always show non terminal states
    *   always show states completed
    *   always show last states
    */
    if (!this.hideTerminal || !this.config.isTerminal || this.config.status === "Completed" /* Completed */ || this.isLast) {
      // console.log('Ok', this.config);
      return true;
    }
    else {
      // console.log(this.config)
      return false;
    }
  }
  renderMilestone(config) {
    if (this.showState) {
      switch (config === null || config === void 0 ? void 0 : config.status) {
        case "Pending" /* Pending */:
          return (h("div", { class: "row" },
            h("uxpl-icon", { class: { "milestone-widget": true }, icon: "ic-mini-state-" + this.miniIcon, color: "#DEDEDE", size: this.iconHeight }),
            h("uxpl-icon", { class: { "milestone-widget": true }, icon: "ic-milestone-" + this.iconPos, color: "#DEDEDE", height: this.iconHeight, width: this.msWidth },
              h("div", { class: this.milestoneLabelClass }, config === null || config === void 0 ? void 0 : config.label))));
        case "Completed" /* Completed */:
          return (h("div", { class: "row" },
            h("uxpl-icon", { class: { "milestone-widget": true }, icon: "ic-mini-state-" + this.miniIcon, color: this.config.isTerminal ? "#04BE5B" : "#062E79", size: this.iconHeight }),
            h("uxpl-icon", { class: { "milestone-widget": true }, icon: "ic-milestone-" + this.iconPos, color: this.config.isTerminal ? "#04BE5B" : "#062E79", height: this.iconHeight, width: this.msWidth },
              h("div", { class: this.milestoneLabelClass }, config === null || config === void 0 ? void 0 : config.label))));
        case "InProgress" /* InProgress */:
          return (h("div", { class: "row" },
            h("uxpl-icon", { class: { "milestone-widget": true }, icon: "ic-mini-state-" + this.miniIcon, color: "#0081CB", size: this.iconHeight }),
            h("uxpl-icon", { class: { "milestone-widget": true }, icon: "ic-milestone-" + this.iconPos, color: "#0081CB", height: this.iconHeight, width: this.msWidth },
              h("div", { class: this.milestoneLabelClass }, config === null || config === void 0 ? void 0 : config.label))));
        case "Revisited" /* Revisited */:
          return (h("div", { class: "row" },
            h("uxpl-icon", { class: { "milestone-widget": true }, icon: "ic-mini-state-" + this.miniIcon, color: "#062E79", size: this.iconHeight }),
            this.small ?
              h("uxpl-icon", { class: { "milestone-widget": true, "small": this.small }, icon: "ic-revisited-" + this.iconPos + '-small', height: this.iconHeight, width: this.msWidth },
                h("div", { class: this.milestoneLabelClass }, config === null || config === void 0 ? void 0 : config.label))
              :
                h("uxpl-icon", { class: { "milestone-widget": true }, icon: "ic-revisited-" + this.iconPos, height: this.iconHeight, width: this.msWidth },
                  h("div", { class: this.milestoneLabelClass }, config === null || config === void 0 ? void 0 : config.label))));
        default:
          return (undefined);
      }
    }
    else {
      return undefined;
    }
  }
  render() {
    return (h(Host, null, this.renderMilestone(this.config)));
  }
  static get is() { return "uxpl-milestone"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-milestone.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-milestone.css"]
  }; }
  static get properties() { return {
    "config": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Milestone",
        "resolved": "Milestone",
        "references": {
          "Milestone": {
            "location": "import",
            "path": "../../models/milestone"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "isFirst": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-first",
      "reflect": false
    },
    "isLast": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-last",
      "reflect": false
    },
    "small": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "small",
      "reflect": false
    },
    "hideTerminal": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hide-terminal",
      "reflect": false
    }
  }; }
}
