// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { classMap, repeat, when } from '../../../Directives/Directives';
import { setEmpty } from '../../../Directives/SetEmpty';
// #endregion
/**
 * The template of the `StepperElement`.
 *
 * @public
 */
export function stepperElementTemplate(e) {
    const getStateIcon = (state) => {
        switch (state) {
            case 'completed':
                return Icons.successCircle;
            case 'error':
                return Icons.errorCircle;
            case 'pending':
                return '';
            default:
                return '';
        }
    };
    const getStateVariant = (state) => {
        switch (state) {
            case 'completed':
                return 'success';
            case 'error':
                return 'danger';
            case 'pending':
            default:
                return 'neutral';
        }
    };
    return html `
        <div part="header"
             class="${classMap({ [`is-${e.orientation}`]: true })}">
            ${repeat(e.items, (x) => x, (x, index) => html `
            <div part="step-container"
                 class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}">
                <button part="step"
                        class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}"
                        type="button"
                        role="tab"
                        aria-selected="${x.isSelected}"
                        aria-posinset="${index + 1}"
                        aria-setsize="${e.items.length}"
                        ?disabled="${x.disabled || e.disabled}"
                        @click="${() => e.onStepInvoked(x)}">
                    <span part="step-icon"
                          aria-hidden="true">
                        <mosaik-pip part="step-state"
                                    .icon="${x.icon ? x.icon : getStateIcon(x.state)}"
                                    .text="${String(index + 1)}"
                                    .variant="${getStateVariant(x.state)}"
                                    .appearance="${'plain'}"></mosaik-pip>
                    </span>
                    <span part="step-text">
                        <mosaik-text part="step-header"
                                     .text="${x.header || x.displayText || ''}"></mosaik-text>
                        ${when(x.description.trim(), () => html `
                        <mosaik-text part="step-description"
                                     .text="${x.description}"></mosaik-text>
                        `)}
                        ${when(x.hint.trim(), () => html `
                        <mosaik-text part="step-optional"
                                     .text="${x.hint}"></mosaik-text>
                        `)}
                    </span>
                </button>
                ${when(index < e.items.length - 1, () => html `
                <div part="connector" class="${classMap({ 'is-completed': x.state === 'completed' })}"></div>
                `)}
            </div>
            `)}
        </div>
        <div part="content">
            <slot name="steps"
                  @slotchange="${() => e.onSlotChange()}"></slot>
        </div>
        <div part="footer"
             ?hidden="${!e.hasSlotContent('footer')}">
            <slot name="footer"
                  @slotchange="${(x) => setEmpty(x.target.parentElement, x.target.assignedElements().length === 0)}"></slot>
        </div>
    `;
}
//# sourceMappingURL=StepperElementTemplate.js.map