var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Fragment, h } from '@stencil/core';
import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaPageUpdate } from '../../../../helpers/event-manager/event-id/vega-event-id';
import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
import changeManager from '../../../../helpers/change-manager/change-manager';
import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
import { VegaInternalProgressTrackerStepClick } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
/** Renders the progress tracker component. */
export class VegaProgressTrackerRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.renderStepIcon = (step, stepIndex) => {
      return (h("div", { class: "vega-progress-step-icon-container" },
        h("div", { class: "vega-progress-step__icon" }, step.isCompleted() ? (h("vega-icon", { icon: "checkmark-rounded", size: "size-16" })) : (h("span", null, stepIndex + 1)))));
    };
    this.renderStep = (step, stepIndex) => {
      var _a;
      return (h("div", { role: !step.clickable ? null : 'button', class: [
          'vega-progress-step',
          step.progressStatus,
          step.isCurrent ? 'current' : '',
          !step.clickable ? 'disabled' : '',
        ]
          .filter(Boolean)
          .join(' '), "data-index": stepIndex, tabIndex: !step.clickable ? null : 0, onClick: !step.clickable ? null : this.onStepIconClick, onKeyDown: !step.clickable ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": step.title },
        h("div", { class: "vega-progress-step-icon-divider" },
          h("div", { class: `vega-progress-step__divider left ${((_a = this.currentSteps[stepIndex - 1]) === null || _a === void 0 ? void 0 : _a.isCompleted()) ? 'background' : ''}` }),
          this.renderStepIcon(step, stepIndex),
          h("div", { class: `vega-progress-step__divider right ${step.isCompleted() ? 'complete' : 'default'}` })),
        h("div", { class: "vega-progress-step__title" }, this.renderStepTitle(step, stepIndex, 'top'))));
    };
    this.onStepIconClick = (e) => {
      const index = Number(e.currentTarget.getAttribute('data-index'));
      changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalProgressTrackerStepClick), index);
    };
  }
  async gotoCarouselPage(current) {
    const targetCurrent = current !== null && current !== void 0 ? current : this.current;
    if (targetCurrent >= 0 && this.carouselContainerRef.getBoundingClientRect().width > 0) {
      await this.carouselRef.goToPage(targetCurrent + 1);
    }
  }
  render() {
    return (h(Fragment, null,
      h("div", { class: "vega-progress-tracker__container" },
        h("div", { class: "vega-progress-tracker__slot" }, this.currentSteps.map((step, stepIndex) => this.renderStep(step, stepIndex)))),
      h("div", { class: "vega-progress-tracker__box", ref: (ref) => (this.carouselContainerRef = ref) },
        h("vega-carousel", { showSlider: false, itemsPerPage: 1, canSwipe: this.canClickStep, ref: (el) => {
            /**
             * The below method is e2e-test covered in
             * @see{module:vega-progress-tracker-with-touch-event-mobile}
             */
            /* istanbul ignore next */
            DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaPageUpdate, async (input) => {
              await this.host.setCurrent(input.detail - 1);
            });
            return (this.carouselRef = el);
          } }, this.currentSteps.map((step, index) => this.renderStepTitle(step, index, 'carousel'))))));
  }
  renderStepTitle(step, stepIndex, position) {
    const isCompact = this.currentDirection === 'horizontal-compact';
    if ((isCompact && position === 'carousel') || (!isCompact && position === 'top')) {
      if (this.renderModeController.isSourceRenderMode()) {
        return (h("vega-progress-tracker-step", { key: step.stepKey, stepKey: step.stepKey }, step.title));
      }
      else {
        return h("slot", { name: `step-${stepIndex}` });
      }
    }
  }
}
__decorate([
  MapToComponentField()
], VegaProgressTrackerRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaProgressTrackerRenderer.prototype, "currentSteps", void 0);
__decorate([
  MapToComponentField()
], VegaProgressTrackerRenderer.prototype, "canClickStep", void 0);
__decorate([
  MapToComponentField()
], VegaProgressTrackerRenderer.prototype, "current", void 0);
__decorate([
  MapToComponentField()
], VegaProgressTrackerRenderer.prototype, "deprecatedPropertySlimmer", void 0);
__decorate([
  MapToComponentField()
], VegaProgressTrackerRenderer.prototype, "currentStepController", void 0);
__decorate([
  MapToComponentField()
], VegaProgressTrackerRenderer.prototype, "currentDirection", void 0);
__decorate([
  MapToComponentField()
], VegaProgressTrackerRenderer.prototype, "renderModeController", void 0);
