import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.js";
import style from "./sequence-toolbar.css.js";
import { SequenceType, SequenceStyle, SequenceValue } from "../sequence-step/sequence-step.js";
import "../../icons/icon-chevron-left-google.js";
import "../../icons/icon-chevron-right-google.js";
import "../../icons/icon-up-iec.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var SequenceToolbarType = /* @__PURE__ */ ((SequenceToolbarType2) => {
  SequenceToolbarType2["unordered"] = "unordered";
  SequenceToolbarType2["condensed"] = "condensed";
  SequenceToolbarType2["sequential"] = "sequential";
  return SequenceToolbarType2;
})(SequenceToolbarType || {});
let ObcSequenceToolbar = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "unordered";
    this.hasAdd = false;
    this.onPrevClick = () => this.dispatchEvent(
      new CustomEvent("prev-click", { bubbles: true, composed: true })
    );
    this.onNextClick = () => this.dispatchEvent(
      new CustomEvent("next-click", { bubbles: true, composed: true })
    );
    this.onAddClick = () => this.dispatchEvent(
      new CustomEvent("add-click", { bubbles: true, composed: true })
    );
  }
  renderAddButton() {
    return html`
      <obc-sequence-step
        class="add-button"
        variant="toolbar-add"
        aria-label="Add step"
        .type=${SequenceType.large}
        .styleType=${SequenceStyle.point}
        .value=${SequenceValue.notStarted}
        .showStepInputConnector=${false}
        .showStepOutputConnector=${false}
        .hasIcon=${false}
        @click=${this.onAddClick}
      >
        <obi-up-iec></obi-up-iec>
      </obc-sequence-step>
    `;
  }
  renderSequentialLayout() {
    return html`
      <div class="sequence-step-item">
        <obc-sequence-step
          class="edge-button edge-button--outline"
          variant="toolbar-prev"
          .type=${SequenceType.large}
          .styleType=${SequenceStyle.regular}
          .value=${SequenceValue.notStarted}
          .showStepInputConnector=${false}
          .showStepOutputConnector=${false}
          .hasIcon=${false}
          @click=${this.onPrevClick}
        >
          <slot name="start">Previous</slot>
        </obc-sequence-step>
      </div>
      <div class="step-container" role="list">
        <slot></slot>
      </div>
      <div class="sequence-step-item">
        <obc-sequence-step
          class="edge-button"
          .type=${SequenceType.large}
          .styleType=${SequenceStyle.point}
          .value=${SequenceValue.completed}
          .showStepInputConnector=${false}
          .showStepOutputConnector=${false}
          .hasIcon=${false}
          @click=${this.onNextClick}
        >
          <slot name="end">Next</slot>
        </obc-sequence-step>
      </div>
    `;
  }
  renderUnorderedLayout(showAddButton) {
    return html`
      <div class="sequence-step-item">
        <obc-sequence-step
          class="edge-button edge-button--outline"
          .type=${SequenceType.large}
          .styleType=${SequenceStyle.regular}
          .value=${SequenceValue.notStarted}
          .showStepInputConnector=${false}
          .showStepOutputConnector=${false}
          .hasIcon=${false}
          @click=${this.onPrevClick}
        >
          <slot name="start">Previous</slot>
        </obc-sequence-step>
      </div>
      <div class="step-container" role="list">
        <slot></slot>
        ${showAddButton ? this.renderAddButton() : nothing}
      </div>
      <div class="sequence-step-item">
        <obc-sequence-step
          class="edge-button edge-button--outline"
          .type=${SequenceType.large}
          .styleType=${SequenceStyle.point}
          .value=${SequenceValue.notStarted}
          .showStepInputConnector=${false}
          .showStepOutputConnector=${false}
          .hasIcon=${false}
          @click=${this.onNextClick}
        >
          <slot name="end">Next</slot>
        </obc-sequence-step>
      </div>
    `;
  }
  renderCondensedLayout(showAddButton) {
    return html`
      <div class="condensed-control condensed-start">
        <obc-sequence-step
          class="condensed-icon"
          variant="toolbar-condensed-icon"
          .type=${SequenceType.large}
          .styleType=${SequenceStyle.point}
          .value=${SequenceValue.notStarted}
          .showStepInputConnector=${false}
          .showStepOutputConnector=${false}
          .hasIcon=${false}
          aria-label="Previous"
          @click=${this.onPrevClick}
        >
          <obi-chevron-left-google></obi-chevron-left-google>
        </obc-sequence-step>
      </div>
      <obc-sequence-step
        class="condensed-label"
        .type=${SequenceType.large}
        .styleType=${SequenceStyle.regular}
        .value=${SequenceValue.notStarted}
        .showStepInputConnector=${false}
        .showStepOutputConnector=${false}
        .hasIcon=${false}
      >
        <span class="condensed-label__current">
          <slot name="condensed-current">2</slot>
        </span>
        <span class="condensed-label__divider"> / </span>
        <span class="condensed-label__total">
          <slot name="condensed-total">4</slot>
        </span>
      </obc-sequence-step>
      ${showAddButton ? this.renderAddButton() : nothing}
      <div class="condensed-control condensed-end">
        <obc-sequence-step
          class="condensed-icon"
          variant="toolbar-condensed-icon"
          .type=${SequenceType.large}
          .styleType=${SequenceStyle.point}
          .value=${SequenceValue.notStarted}
          .showStepInputConnector=${false}
          .showStepOutputConnector=${false}
          .hasIcon=${false}
          aria-label="Next"
          @click=${this.onNextClick}
        >
          <obi-chevron-right-google></obi-chevron-right-google>
        </obc-sequence-step>
      </div>
    `;
  }
  render() {
    const showAddButton = this.hasAdd && this.type !== "sequential";
    const classes = classMap({
      "sequence-toolbar": true,
      [`type-${this.type}`]: true
    });
    let content;
    switch (this.type) {
      case "condensed":
        content = this.renderCondensedLayout(showAddButton);
        break;
      case "sequential":
        content = this.renderSequentialLayout();
        break;
      case "unordered":
      default:
        content = this.renderUnorderedLayout(showAddButton);
        break;
    }
    return html`<div class=${classes}>${content}</div>`;
  }
};
ObcSequenceToolbar.styles = unsafeCSS(style);
__decorateClass([
  property({ type: String, reflect: true })
], ObcSequenceToolbar.prototype, "type", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceToolbar.prototype, "hasAdd", 2);
ObcSequenceToolbar = __decorateClass([
  customElement("obc-sequence-toolbar")
], ObcSequenceToolbar);
export {
  ObcSequenceToolbar,
  SequenceToolbarType
};
//# sourceMappingURL=sequence-toolbar.js.map
