import { Component, inject, Input, Output, EventEmitter } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone';
import { CommonModule } from '@angular/common';
import { PresetService } from '../../../services/presets';
import { addIcons } from 'ionicons';
import { checkmark, close, ellipse } from 'ionicons/icons';
import * as i0 from "@angular/core";
addIcons({ checkmark, close, ellipse });
/**
 * val-stepper
 *
 * A stepper component for multi-step processes.
 * Supports horizontal and vertical orientations.
 *
 * @example Basic usage
 * <val-stepper [props]="{
 *   steps: [
 *     { value: 'info', label: 'Personal Info' },
 *     { value: 'address', label: 'Address' },
 *     { value: 'payment', label: 'Payment' },
 *     { value: 'confirm', label: 'Confirm' }
 *   ],
 *   currentIndex: 1
 * }" (stepChange)="onStepChange($event)"></val-stepper>
 *
 * @example Vertical with descriptions
 * <val-stepper [props]="{
 *   steps: [
 *     { value: 'step1', label: 'Step 1', description: 'Description here' },
 *     { value: 'step2', label: 'Step 2', optional: true }
 *   ],
 *   orientation: 'vertical',
 *   currentIndex: 0
 * }"></val-stepper>
 *
 * @input props: StepperMetadata - Configuration for the stepper
 * @output stepChange: StepChangeEvent - Emits when step changes
 */
export class StepperComponent {
    constructor() {
        this.presets = inject(PresetService);
        /**
         * Stepper configuration object. Values here override preset values.
         */
        this.props = {};
        /**
         * Resolved props after merging preset + explicit props.
         */
        this.resolvedProps = {};
        this.stepChange = new EventEmitter();
    }
    ngOnInit() {
        this.resolveProps();
    }
    ngOnChanges(changes) {
        if (changes['preset'] || changes['props']) {
            this.resolveProps();
        }
    }
    resolveProps() {
        const presetProps = this.preset
            ? this.presets.get('stepper', this.preset)
            : {};
        this.resolvedProps = {
            ...presetProps,
            ...this.props,
        };
    }
    getCurrentIndex() {
        if (this.resolvedProps.currentIndex !== undefined) {
            return this.resolvedProps.currentIndex;
        }
        if (this.resolvedProps.currentStep) {
            return this.resolvedProps.steps?.findIndex((s) => s.value === this.resolvedProps.currentStep) ?? 0;
        }
        return 0;
    }
    getStepStatus(step, index) {
        if (step.status)
            return step.status;
        const currentIndex = this.getCurrentIndex();
        if (index < currentIndex)
            return 'completed';
        if (index === currentIndex)
            return 'current';
        return 'pending';
    }
    getStepColor(step, index) {
        const status = this.getStepStatus(step, index);
        const color = this.resolvedProps.color || 'primary';
        switch (status) {
            case 'completed':
                return `var(--ion-color-${color})`;
            case 'current':
                return `var(--ion-color-${color})`;
            case 'error':
                return 'var(--ion-color-danger)';
            default:
                return 'var(--ion-color-medium)';
        }
    }
    isStepClickable(step, index) {
        if (step.disabled)
            return false;
        if (!this.resolvedProps.linear)
            return true;
        const currentIndex = this.getCurrentIndex();
        return index <= currentIndex || (step.editable && index < currentIndex);
    }
    onStepClick(step, index) {
        if (!this.isStepClickable(step, index))
            return;
        const currentIndex = this.getCurrentIndex();
        if (index === currentIndex)
            return;
        this.stepChange.emit({
            step,
            index,
            previousIndex: currentIndex,
        });
    }
    getStepLabel(step) {
        return step.label || step.contentFallback || '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperComponent, isStandalone: true, selector: "val-stepper", inputs: { preset: "preset", props: "props" }, outputs: { stepChange: "stepChange" }, usesOnChanges: true, ngImport: i0, template: `
    <div
      class="stepper-container"
      [class.horizontal]="resolvedProps.orientation !== 'vertical'"
      [class.vertical]="resolvedProps.orientation === 'vertical'"
    >
      @for (step of resolvedProps.steps; track step.value; let i = $index; let isLast = $last) {
        <div
          class="step"
          [class.current]="getStepStatus(step, i) === 'current'"
          [class.completed]="getStepStatus(step, i) === 'completed'"
          [class.error]="getStepStatus(step, i) === 'error'"
          [class.disabled]="step.disabled"
          [class.clickable]="isStepClickable(step, i)"
          (click)="onStepClick(step, i)"
        >
          <div class="step-indicator">
            <div class="step-circle" [style.--step-color]="getStepColor(step, i)">
              @if (getStepStatus(step, i) === 'completed') {
                <ion-icon name="checkmark"></ion-icon>
              } @else if (getStepStatus(step, i) === 'error') {
                <ion-icon name="close"></ion-icon>
              } @else if (step.icon) {
                <ion-icon [name]="step.icon"></ion-icon>
              } @else if (resolvedProps.showNumbers !== false) {
                <span class="step-number">{{ i + 1 }}</span>
              } @else {
                <ion-icon name="ellipse"></ion-icon>
              }
            </div>
            @if (!isLast && resolvedProps.connectorStyle !== 'none') {
              <div
                class="step-connector"
                [class.dashed]="resolvedProps.connectorStyle === 'dashed'"
                [class.completed]="getStepStatus(step, i) === 'completed'"
              ></div>
            }
          </div>
          <div class="step-content">
            <div class="step-label">
              {{ getStepLabel(step) }}
              @if (step.optional) {
                <span class="optional-text">(Optional)</span>
              }
            </div>
            @if (step.description) {
              <div class="step-description">{{ step.description }}</div>
            }
          </div>
        </div>
      }
    </div>
  `, isInline: true, styles: [":host{display:block}.stepper-container{display:flex}.stepper-container.horizontal{flex-direction:row;align-items:flex-start}.stepper-container.horizontal .step{flex:1;flex-direction:column;align-items:center;text-align:center}.stepper-container.horizontal .step .step-indicator{flex-direction:row;width:100%;justify-content:center}.stepper-container.horizontal .step .step-connector{flex:1;height:2px;margin:0 8px;align-self:center}.stepper-container.vertical{flex-direction:column}.stepper-container.vertical .step{flex-direction:row;align-items:flex-start}.stepper-container.vertical .step .step-indicator{flex-direction:column;align-items:center}.stepper-container.vertical .step .step-connector{width:2px;flex:1;min-height:24px;margin:8px 0}.stepper-container.vertical .step .step-content{margin-left:12px;padding-bottom:24px}.step{display:flex;cursor:default}.step.clickable{cursor:pointer}.step.clickable:hover .step-circle{transform:scale(1.1)}.step.disabled{opacity:.5;pointer-events:none}.step.current .step-circle{box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.2)}.step-indicator{display:flex;position:relative}.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--step-color, var(--ion-color-medium));color:#fff;font-weight:600;font-size:.875rem;transition:transform .2s,box-shadow .2s;flex-shrink:0}.step-circle ion-icon{font-size:1.125rem}.step-connector{background-color:var(--ion-color-light-shade);transition:background-color .3s}.step-connector.completed{background-color:var(--ion-color-primary)}.step-connector.dashed{background:repeating-linear-gradient(90deg,var(--ion-color-light-shade),var(--ion-color-light-shade) 4px,transparent 4px,transparent 8px)}.step-connector.dashed.completed{background:repeating-linear-gradient(90deg,var(--ion-color-primary),var(--ion-color-primary) 4px,transparent 4px,transparent 8px)}.step-content{margin-top:8px}.step-label{font-weight:500;font-size:.875rem;color:var(--ion-text-color)}.step-label .optional-text{font-weight:400;font-size:.75rem;color:var(--ion-color-medium);margin-left:4px}.step-description{font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-stepper', standalone: true, imports: [CommonModule, IonIcon], template: `
    <div
      class="stepper-container"
      [class.horizontal]="resolvedProps.orientation !== 'vertical'"
      [class.vertical]="resolvedProps.orientation === 'vertical'"
    >
      @for (step of resolvedProps.steps; track step.value; let i = $index; let isLast = $last) {
        <div
          class="step"
          [class.current]="getStepStatus(step, i) === 'current'"
          [class.completed]="getStepStatus(step, i) === 'completed'"
          [class.error]="getStepStatus(step, i) === 'error'"
          [class.disabled]="step.disabled"
          [class.clickable]="isStepClickable(step, i)"
          (click)="onStepClick(step, i)"
        >
          <div class="step-indicator">
            <div class="step-circle" [style.--step-color]="getStepColor(step, i)">
              @if (getStepStatus(step, i) === 'completed') {
                <ion-icon name="checkmark"></ion-icon>
              } @else if (getStepStatus(step, i) === 'error') {
                <ion-icon name="close"></ion-icon>
              } @else if (step.icon) {
                <ion-icon [name]="step.icon"></ion-icon>
              } @else if (resolvedProps.showNumbers !== false) {
                <span class="step-number">{{ i + 1 }}</span>
              } @else {
                <ion-icon name="ellipse"></ion-icon>
              }
            </div>
            @if (!isLast && resolvedProps.connectorStyle !== 'none') {
              <div
                class="step-connector"
                [class.dashed]="resolvedProps.connectorStyle === 'dashed'"
                [class.completed]="getStepStatus(step, i) === 'completed'"
              ></div>
            }
          </div>
          <div class="step-content">
            <div class="step-label">
              {{ getStepLabel(step) }}
              @if (step.optional) {
                <span class="optional-text">(Optional)</span>
              }
            </div>
            @if (step.description) {
              <div class="step-description">{{ step.description }}</div>
            }
          </div>
        </div>
      }
    </div>
  `, styles: [":host{display:block}.stepper-container{display:flex}.stepper-container.horizontal{flex-direction:row;align-items:flex-start}.stepper-container.horizontal .step{flex:1;flex-direction:column;align-items:center;text-align:center}.stepper-container.horizontal .step .step-indicator{flex-direction:row;width:100%;justify-content:center}.stepper-container.horizontal .step .step-connector{flex:1;height:2px;margin:0 8px;align-self:center}.stepper-container.vertical{flex-direction:column}.stepper-container.vertical .step{flex-direction:row;align-items:flex-start}.stepper-container.vertical .step .step-indicator{flex-direction:column;align-items:center}.stepper-container.vertical .step .step-connector{width:2px;flex:1;min-height:24px;margin:8px 0}.stepper-container.vertical .step .step-content{margin-left:12px;padding-bottom:24px}.step{display:flex;cursor:default}.step.clickable{cursor:pointer}.step.clickable:hover .step-circle{transform:scale(1.1)}.step.disabled{opacity:.5;pointer-events:none}.step.current .step-circle{box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.2)}.step-indicator{display:flex;position:relative}.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--step-color, var(--ion-color-medium));color:#fff;font-weight:600;font-size:.875rem;transition:transform .2s,box-shadow .2s;flex-shrink:0}.step-circle ion-icon{font-size:1.125rem}.step-connector{background-color:var(--ion-color-light-shade);transition:background-color .3s}.step-connector.completed{background-color:var(--ion-color-primary)}.step-connector.dashed{background:repeating-linear-gradient(90deg,var(--ion-color-light-shade),var(--ion-color-light-shade) 4px,transparent 4px,transparent 8px)}.step-connector.dashed.completed{background:repeating-linear-gradient(90deg,var(--ion-color-primary),var(--ion-color-primary) 4px,transparent 4px,transparent 8px)}.step-content{margin-top:8px}.step-label{font-weight:500;font-size:.875rem;color:var(--ion-text-color)}.step-label .optional-text{font-weight:400;font-size:.75rem;color:var(--ion-color-medium);margin-left:4px}.step-description{font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}\n"] }]
        }], propDecorators: { preset: [{
                type: Input
            }], props: [{
                type: Input
            }], stepChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 