// #region Imports
import { html } from '../../../../Dom/Html';
import { classMap, repeat, when } from '../../../Directives/Directives';
import { setEmpty } from '../../../Directives/SetEmpty';
import { Icons } from '../../../../Resources/Icons';
// #endregion
/**
 * The template of the {@link 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 getStateDisplayMode = (state) => {
        switch (state) {
            case 'completed':
            case 'error':
                return 'icon';
            case 'pending':
            default:
                return 'text';
        }
    };
    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-avatar part="step-state"
                                       .icon="${x.icon ? x.icon : getStateIcon(x.state)}"
                                       .text="${String(index + 1)}"
                                       .displayMode="${getStateDisplayMode(x.state)}"
                                       .variant="${getStateVariant(x.state)}"
                                       .appearance="${'plain'}"
                                       .size="${'tiny'}"></mosaik-avatar>

                        ${when(x.icon.trim(), () => html `
                        <mosaik-icon part="icon" .data="${x.icon}"></mosaik-icon>
                        `, () => html `
                        ${when(x.state === 'completed', () => html `
                        <mosaik-icon part="state-icon" .data="${'M4.53033 12.9697C4.23744 12.6768 3.76256 12.6768 3.46967 12.9697C3.17678 13.2626 3.17678 13.7374 3.46967 14.0303L7.96967 18.5303C8.26256 18.8232 8.73744 18.8232 9.03033 18.5303L20.0303 7.53033C20.3232 7.23744 20.3232 6.76256 20.0303 6.46967C19.7374 6.17678 19.2626 6.17678 18.9697 6.46967L8.5 16.9393L4.53033 12.9697Z'}"></mosaik-icon>
                        `, () => when(x.state === 'error', () => html `
                        <mosaik-icon part="state-icon" .data="${'M12 2C17.523 2 22 6.478 22 12C22 17.522 17.523 22 12 22C6.477 22 2 17.522 2 12C2 6.478 6.477 2 12 2ZM12.0018 15.0037C11.4503 15.0037 11.0031 15.4508 11.0031 16.0024C11.0031 16.5539 11.4503 17.001 12.0018 17.001C12.5533 17.001 13.0005 16.5539 13.0005 16.0024C13.0005 15.4508 12.5533 15.0037 12.0018 15.0037ZM11.9996 7C11.4868 7.00018 11.0643 7.38638 11.0067 7.88374L11 8.00036L11.0018 13.0012L11.0086 13.1179C11.0665 13.6152 11.4893 14.0011 12.0022 14.0009C12.515 14.0007 12.9375 13.6145 12.9951 13.1171L13.0018 13.0005L13 7.99964L12.9932 7.88302C12.9353 7.3857 12.5125 6.99982 11.9996 7Z'}"></mosaik-icon>
                        `, () => html `
                        <span part="state-index">${index + 1}</span>
                        `))}
                        `)}
                    </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