// #region Imports
import { html } from '../../../../../Dom/Html';
import { interpolate } from '../../../../Directives/Interpolate/InterpolateDirective';
import { Appearance } from '../../../../Types/Appearance';
import { CalendarView } from '../../../../Types/CalendarView';
// #endregion
/**
 * The template of the {@link CalendarYearsViewElement}.
 *
 * @public
 */
export function calendarYearsViewElementTemplate(e) {
    // the number of years to show (6 in the past, 6 in the future, plus the current year in the middle)
    const pageSize = 13;
    const displayDate = e.displayDate ?? new Date();
    // the minimum year in the current view to show
    const minPageYear = (e.displayDate?.getFullYear() ?? 0) - ((pageSize - 1) / 2);
    // the maximum year in the current view to show
    const maxPageYear = (e.displayDate?.getFullYear() ?? 0) + ((pageSize - 1) / 2);
    // const yearRange: [number, number] = [minPageYear, maxPageYear].map(year => Math.max(year, e.displayDateStart?.getFullYear() ?? year));
    return html `
        <div part="heading"
             style="display: flex; flex: 1;">
            <mosaik-button-group .dir="${e.dir}"
                                 .appearance="${Appearance.Plain}">
                <mosaik-button part="year"
                               .label="${interpolate('{0} - {1}', minPageYear, maxPageYear)}"
                               @click="${() => e.setView(CalendarView.Month)}"></mosaik-button>
            </mosaik-button-group>
            <div part="navigation">
                <slot name="header"></slot>
            </div>
        </div>
        <div part="yearView">
            ${Array.from({ length: pageSize }, (_, i) => displayDate.getFullYear() - 6 + i).map((year) => html `
            <mosaik-calendar-item part="item"
                                    .dir="${e.dir}"
                                    .text="${year.toString()}"
                                    .value="${new Date(year, displayDate.getMonth())}"
                                    .markers="${e.markerHandler(new Date(year, displayDate.getMonth()))}"
                                    ?disabled="${e.disabled && e.isDateInRange(new Date(year, displayDate.getMonth()))}"
                                    @click="${() => e.selectYear(year)}"></mosaik-calendar-item>
            `)}
        </div>
    `;
}
//# sourceMappingURL=CalendarYearsViewElementTemplate.js.map