import { Component, Host, h, Prop, Watch, State, Event } from '@stencil/core';
export class UxplStepper {
  constructor() {
    this.currentStepIdx = 0;
  }
  configChange(newValue, oldValue) {
    if (newValue.currentStepIdx !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.currentStepIdx)) {
      this.currentStepIdx = newValue.currentStepIdx;
    }
  }
  setStep(idx) {
    if (this.config.steps[idx].available) {
      this.currentStepIdx = idx;
      this.config.currentStepIdx = idx;
      this.stepClicked.emit(this.config.steps[idx]);
      this.stepClickedIdx.emit(idx);
    }
  }
  render() {
    if (this.config) {
      return (h(Host, null,
        h("div", { class: "uxpl-stepper" },
          h("div", { class: "header-content" },
            h("div", { class: "uxpl-steps" }, this.config && this.config.steps.map((step, idx) => h("div", { class: {
                "uxpl-stepper-step-outer": true,
                "first-step": idx == 0,
                "current-step": (this.currentStepIdx === idx),
                "previous-step": (idx < this.currentStepIdx),
                "available-step": step.available
              }, onClick: () => this.setStep(idx) },
              h("div", { class: "uxpl-stepper-step" },
                h("div", { class: {
                    "step": true,
                    "current-step": (this.currentStepIdx === idx),
                  } }, (this.hideNumbers) ? h("div", null) : h("div", { class: "uxpl-stepper-marker" }, step.name)),
                h("div", { class: "uxpl-stepper-label" }, step.label)),
              h("div", { class: "uxpl-step-indicator-icon" })))),
            h("div", { class: "uxpl-stepper-bar" })),
          h("div", { class: "slot-content" },
            h("slot", { name: this.config.steps[this.currentStepIdx].slot }),
            h("slot", null)),
          h("div", { class: "navigation-section" },
            h("div", { class: "uxpl-stepper-bar" }),
            h("slot", { name: "navigation-buttons" })))));
    }
    else {
      return (h(Host, null));
    }
  }
  static get is() { return "uxpl-stepper"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-stepper.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-stepper.css"]
  }; }
  static get assetsDirs() { return ["assets"]; }
  static get properties() { return {
    "config": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "StepperConfig",
        "resolved": "StepperConfig",
        "references": {
          "StepperConfig": {
            "location": "import",
            "path": "../../models/stepperConfig"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "config"
      }
    },
    "hideNumbers": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Property to say if numbers on the top needs to be hidden"
      },
      "attribute": "hide-numbers",
      "reflect": false
    }
  }; }
  static get states() { return {
    "currentStepIdx": {}
  }; }
  static get events() { return [{
      "method": "stepClicked",
      "name": "stepClicked",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "step clicked event"
      },
      "complexType": {
        "original": "Step",
        "resolved": "Step",
        "references": {
          "Step": {
            "location": "import",
            "path": "../../models/stepperConfig"
          }
        }
      }
    }, {
      "method": "stepClickedIdx",
      "name": "stepClickedIdx",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "step clicked index event"
      },
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      }
    }]; }
  static get watchers() { return [{
      "propName": "config",
      "methodName": "configChange"
    }]; }
}
