import { html, nothing } from 'lit';
import { query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { scrollIntoView } from '../../internal/scroll.mjs';
import styles from './stepper.styles.mjs';
import { capitalize } from '@emuanalytics/flow-rdf-core/utils';

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;
};
let id = 0;
class FlowUiStepper extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.attrId = ++id;
    this.componentId = `flow-ui-stepper-${this.attrId}`;
    this.panels = [];
  }
  connectedCallback() {
    super.connectedCallback();
    this.id = this.id.length > 0 ? this.id : this.componentId;
    this.mutationObserver = new MutationObserver((_mutations) => {
      this.syncPanels();
    });
    this.updateComplete.then(() => {
      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
    });
  }
  /** Mark the specified panel as `complete` */
  setComplete(panelName, complete = true) {
    const panel = this.panels.find((el) => el.name === panelName);
    if (panel && panel.complete !== complete) {
      panel.complete = complete;
    }
  }
  show(panelName) {
    const panel = this.panels.find((el) => el.name === panelName);
    if (panel) {
      this.setActivePanel(panel);
    }
  }
  syncPanels() {
    this.panels = this.getAllPanels();
    this.activePanel = this.panels.find((el) => el.active);
    if (!this.activePanel) {
      this.activePanel = this.panels[0];
    }
  }
  getAllPanels() {
    return [...this.bodySlot.assignedElements()].filter(
      (el) => el.tagName.toLowerCase() === "flow-ui-stepper-panel"
    );
  }
  setActivePanel(panel, options) {
    options = {
      emitEvents: true,
      scrollBehavior: "auto",
      ...options
    };
    if (panel !== this.activePanel) {
      const previousPanel = this.activePanel;
      this.activePanel = panel;
      this.panels.forEach((el) => el.active = el === this.activePanel);
      const panelIndex = this.panels.indexOf(this.activePanel);
      const panelHeaderItem = this.headerScrollContainer.getElementsByClassName("stepper__header-item").item(panelIndex);
      scrollIntoView(panelHeaderItem, this.headerScrollContainer, "horizontal", options.scrollBehavior);
      if (options.emitEvents) {
        if (previousPanel) {
          this.emit("flow-ui-tab-hide", { detail: { name: previousPanel.name } });
        }
        this.emit("flow-ui-tab-show", { detail: { name: this.activePanel.name } });
      }
    }
  }
  renderHeaderItem(panel, index) {
    return html`
      <div
        class=${classMap({
      "stepper__header-item": true,
      "stepper__header-item--active": panel.active,
      "stepper__header-item--complete": panel.complete
    })}
      >
        <div class="stepper__header-item-icon">
          <div class="stepper__header-item-icon-content">${index + 1}</div>
        </div>
        <div class="stepper__header-item-label">
          <div class="stepper__header-item-title">${capitalize(panel.name)}</div>
          ${panel.subTitle ? html`
                <div class="stepper__header-item-subtitle">${panel.subTitle}</div>
              ` : nothing}
        </div>
      </div>
    `;
  }
  renderHeader() {
    return this.panels.map((panel, index) => {
      const template = [this.renderHeaderItem(panel, index)];
      if (index > 0) {
        template.unshift(html`
          <div class="stepper__header-line"></div>
        `);
      }
      return template;
    });
  }
  render() {
    return html`
      <div part="base" class="stepper">
        <div class="stepper_header-scroll-container">
          <div part="header" class="stepper__header">${this.renderHeader()}</div>
        </div>
        <div part="body" class="stepper__body">
          <slot class="stepper__body-slot" @slotchange=${this.syncPanels}></slot>
        </div>
      </div>
    `;
  }
}
FlowUiStepper.styles = styles;
__decorateClass([
  query(".stepper__body-slot")
], FlowUiStepper.prototype, "bodySlot", 2);
__decorateClass([
  query(".stepper_header-scroll-container")
], FlowUiStepper.prototype, "headerScrollContainer", 2);
__decorateClass([
  state()
], FlowUiStepper.prototype, "panels", 2);

export { FlowUiStepper as default };
