/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-stepper.css';
import NileElement from '../internal/nile-element';
import { watch } from '../internal/watch';
import { classMap } from 'lit/directives/class-map.js';
import { updateItemsInManualMode } from './stepper-utils';
/**
 * Nile stepper component.
 *
 * @tag nile-stepper
 *
 */
let NileStepper = class NileStepper extends NileElement {
    constructor() {
        super(...arguments);
        this.isVertical = false;
        this.contentBelow = false;
        this.currentStep = 0;
        this.completedStep = 0;
        this.size = 'lg';
        this.icon = 'tick';
        this.manual = false;
        /* #endregion */
    }
    update(changedProperties) {
        super.update(changedProperties);
        if (changedProperties.has('currentStep') || changedProperties.has('completedStep') || changedProperties.has('manual')) {
            this.updateItems();
        }
    }
    handleCurrentStepChanges() {
        this.updateItems();
        this.emit('nile-current-change', { value: this.currentStep });
    }
    handleCompletedStepChanges() {
        this.updateItems();
        this.emit('nile-completed-change', { value: this.completedStep });
    }
    updateItems() {
        const items = [...this.querySelectorAll(this.isVertical ? 'nile-vertical-stepper-item' : 'nile-stepper-item')];
        if (!items.length)
            return;
        const haveFlex = items.length < 3;
        if (this.manual) {
            // Manual mode: use inline properties from each item
            updateItemsInManualMode(items, {
                icon: this.icon,
                size: this.size,
                contentBelow: this.contentBelow,
                manual: this.manual,
                isVertical: this.isVertical
            }, haveFlex);
        }
        else {
            // Automatic mode: use currentStep and completedStep properties
            const current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;
            const calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;
            const completed = this.completedStep > items.length ? 0 : this.completedStep;
            items.forEach((el, index) => {
                // set item is complete and is current values
                if (index + 1 < current) {
                    el.isComplete = true;
                    el.isCurrent = false;
                }
                else if (index + 1 == current) {
                    if (index + 1 <= calculatedCompleted)
                        el.isComplete = true;
                    else
                        el.isComplete = false;
                    el.isCurrent = true;
                }
                else {
                    if (index + 1 <= calculatedCompleted)
                        el.isComplete = true;
                    else
                        el.isComplete = false;
                    el.isCurrent = false;
                }
                // Reset and set isLast and isFirst
                el.isFirst = false;
                el.isLast = false;
                if (index == 0)
                    el.isFirst = true;
                if (index == items.length - 1)
                    el.isLast = true;
                // setting default values
                el.currentStepValue = current;
                el.calculatedCompletedStepValue = calculatedCompleted;
                el.completedStepValue = completed;
                el.icon = this.icon;
                el.size = this.size;
                el.value = index + 1;
                el.contentBelow = this.contentBelow;
                el.isManualMode = this.manual;
                if (index == 0 || index == items.length - 1) {
                    el.haveFlex = haveFlex;
                }
            });
        }
    }
    /**
     * The styles for nile-stepper
     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
     */
    static get styles() {
        return [styles];
    }
    /* #endregion */
    /* #region Methods */
    /**
     * Render method
     * @slot This is a slot test
     */
    render() {
        return html `
			<div part="stepper" class=${classMap({
            'nile-stepper': true,
            'nile-stepper--horizontal': !this.isVertical,
            'nile-stepper--vertical': this.isVertical
        })}>
				<slot
					@slotchange=${this.updateItems}
				></slot>
			</div>
			`;
    }
};
__decorate([
    property({ type: Boolean, attribute: 'vertical' })
], NileStepper.prototype, "isVertical", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileStepper.prototype, "contentBelow", void 0);
__decorate([
    property({ type: Number, attribute: true, reflect: true })
], NileStepper.prototype, "currentStep", void 0);
__decorate([
    property({ type: Number, attribute: true, reflect: true })
], NileStepper.prototype, "completedStep", void 0);
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileStepper.prototype, "size", void 0);
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileStepper.prototype, "icon", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileStepper.prototype, "manual", void 0);
__decorate([
    watch('currentStep')
], NileStepper.prototype, "handleCurrentStepChanges", null);
__decorate([
    watch('completedStep')
], NileStepper.prototype, "handleCompletedStepChanges", null);
NileStepper = __decorate([
    customElement('nile-stepper')
], NileStepper);
export { NileStepper };
export default NileStepper;
//# sourceMappingURL=nile-stepper.js.map