// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { classMap, ifDefined, live, repeat, when } from '../../../Directives/Directives';
import { ifNonEmpty } from '../../../Directives/IfNonEmpty';
import { Appearance } from '../../../Types/Appearance';
import { Orientation } from '../../../Types/Orientation';
import { Placement } from '../../../Types/Placement';
import { Size } from '../../../Types/Size';
import { ITimeSpan, generateTimeSlots } from '../../../Types/TimeSpan';
import { Variant } from '../../../Types/Variant';
import { VerticalAlignment } from '../../../Types/VerticalAlignment';
// #endregion
/**
 * The template of the `TimeBoxElement`.
 *
 * @public
 */
export function timeBoxElementTemplate(e) {
    return html `
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.invalid ? Variant.Danger : e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
        `)}
        <div part="prefix"
             ?hidden="${!e.hasSlotContent('prefix')}">
            <slot name="prefix"></slot>
        </div>
        <div part="inner" class="${classMap({ prefix: e.hasPrefix, suffix: e.hasSuffix })}">
            ${when(e.label, () => html `
            <label part="label"
                   for="input"
                   class="${classMap({ floating: e.value !== null || e.isFocused })}">${e.label}</label>
            `)}
            <input part="input"
                   .value="${live(e.value?.toString() ?? '')}"
                   ?readonly="${e.readonly}"
                   ?disabled="${e.disabled}"
                   ?required="${e.required}"
                   ?autofocus="${e.autofocus}"
                   id="input"
                   type="text"
                   name="${ifNonEmpty(e.name)}"
                   placeholder="${ifNonEmpty(e.isFocused || !e.label ? e.placeholder : '')}"
                   tabindex="${e.tabIndex}"
                   autocomplete="${ifDefined(e.autocomplete ? 'on' : 'off')}"
                   pattern="^(?:(?:[01]?[0-9]|2[0-3]):[0-5][0-9]$|(?:0?[1-9]|1[0-2]):[0-5][0-9]\s?(AM|PM))$"
                   aria-invalid="${ifDefined(e.invalid)}"
                   @change="${(x) => e.onChange(x)}"
                   @input="${(x) => e.onInput(x)}"
                   @focus="${(x) => e.onFocus(x)}"
                   @blur="${(x) => e.onBlur(x)}"
                   @keydown="${(x) => e.onKeyDown(x)}"/>
        </div>
        ${when(!e.disabled && !e.readonly && e.value && e.isClearable, () => html `
        <mosaik-button part="clear"
                       .appearance="${Appearance.Plain}"
                       .icon="${Icons.clear}"
                       .size="${Size.Small}"
                       .iconSize="${Size.Medium}"
                       .disabled="${e.disabled}"
                       @click="${() => e.clear()}"></mosaik-button>
        `)}
        <mosaik-button part="picker"
                       .appearance="${Appearance.Plain}"
                       .icon="${Icons.clock}"
                       .size="${Size.Small}"
                       .iconSize="${Size.Medium}"
                       .disabled="${e.disabled}"
                       @click="${() => e.toggle()}"></mosaik-button>
        <div part="suffix"
             ?hidden="${!e.hasSlotContent('suffix')}">
            <slot name="suffix"></slot>
        </div>
        <mosaik-portal part="portal">
            <mosaik-floating part="popup"
                            .anchor="${e}"
                            .placement="${e.dropDownPlacement}"
                            .distance="${e.dropDownDistance}"
                            .skidding="${e.dropDownSkidding}"
                            .strategy="${e.dropDownStrategy}"
                            .sync="${'width'}"
                            .flipFallbackPlacements="${[Placement.Top, Placement.Bottom]}"
                            .maxHeight="${e.dropDownMaxHeight}"
                            .height="${e.dropDownHeight}"
                            .maxWidth="${e.dropDownMaxWidth}"
                            .width="${e.dropDownWidth}"
                            .flip="${true}"
                            .shift="${true}"
                            ?active="${e.isDropDownOpen}">
                <mosaik-menu part="menu"
                             .disabled="${e.disabled}">
                    ${repeat(generateTimeSlots(e.interval, e.locale, e.minTime ?? undefined, e.maxTime ?? undefined), (span) => html `
                    <mosaik-menu-item part="menuItem"
                                      .value="${span}"
                                      .label="${span.toString()}"
                                      ?is-blackout="${e.blackoutTimes.some((x) => ITimeSpan.equals(x, span))}"
                                      ?is-special="${e.specialTimes.some((x) => ITimeSpan.equals(x, span))}"
                                      ?disabled="${e.blackoutTimes.some((x) => ITimeSpan.equals(x, span)) || e.disabled || e.readonly}"
                                      ?is-active="${ITimeSpan.isTimeSpan(e.value) && ITimeSpan.equals(e.value, span)}"
                                      @click="${() => e.setTimeSpan(span)}">
                        ${when(e.markerHandler(span), (markers) => html `
                        <mosaik-stack slot="end"
                                      .dir="${e.dir}"
                                      .orientation="${Orientation.Horizontal}"
                                      .verticalAlignment="${VerticalAlignment.Center}"
                                      .gap="${'2px'}">
                            ${repeat(markers, (x) => html `
                            <mosaik-dot part="marker"
                                        .dir="${e.dir}"
                                        .variant="${ifDefined(x.variant)}"
                                        .size="${ifDefined(x.size)}"
                                        ?disabled="${ifDefined(x.disabled)}"></mosaik-dot>
                            `)}
                        </mosaik-stack>
                        `)}
                    </mosaik-menu-item>
                    `)}
                </mosaik-menu>
            </mosaik-floating>
        </mosaik-portal>
    `;
}
//# sourceMappingURL=TimeBoxElementTemplate.js.map