// #region Imports
import { html } from '../../../../../Dom/Html';
import { repeat, when } from '../../../../Directives/Directives';
import { Appearance } from '../../../../Types/Appearance';
import { CalendarView } from '../../../../Types/CalendarView';
import { TextAlignment } from '../../../../Types/TextAlignment';
import { dayNames, getWeekNumber, isDateInDates, isToday, isWeekendDay } from '../Utils';
// #endregion
/**
 * The template of the {@link CalendarDaysViewElement}.
 *
 * @public
 */
export function calendarDaysViewElementTemplate(e) {
    const displayDate = e.displayDate ?? new Date();
    const month = displayDate.getMonth();
    const year = displayDate.getFullYear();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const firstDay = new Date(year, month, e.firstDayOfWeek).getDay();
    const lastDay = new Date(year, month, daysInMonth).getDay();
    const dayNamesIntl = e.intl
        ? [e.intl.sundayLabel, e.intl.mondayLabel, e.intl.tuesdayLabel, e.intl.wednesdayLabel, e.intl.thursdayLabel, e.intl.fridayLabel, e.intl.saturdayLabel]
        : ['na', 'na', 'na', 'na', 'na', 'na', 'na'];
    const isDataSelected = (data) => {
        if (e.value && e.value.getTime() === data.getTime()) {
            return true;
        }
        else if (e.values) {
            return e.values.some((x) => x.getTime() === data.getTime());
        }
        return false;
    };
    return html `
        <div part="heading"
             style="display: flex; flex: 1;">
            <mosaik-button-group .dir="${e.dir}"
                                 .appearance="${Appearance.Plain}">
                <mosaik-button part="month"
                               .label="${e.displayDate?.toLocaleString(e.locale, { month: 'long' }) ?? ''}"
                               @click="${() => e.setView(CalendarView.Month)}"></mosaik-button>
                <mosaik-button part="year"
                               .label="${e.displayDate?.toLocaleString(e.locale, { year: 'numeric' }) ?? ''}"
                               @click="${() => e.setView(CalendarView.Year)}"></mosaik-button>
            </mosaik-button-group>
            <div part="navigation">
                <slot name="header"></slot>
            </div>
        </div>

        <div part="labels"
             class="${e.showWeekNumbers ? 'week-numbers' : ''}">
            ${when(e.showWeekNumbers, () => html `q
            <mosaik-text part="weekNumberLabel"
                         .dir="${e.dir}"
                         .text="${e.intl?.weekNumberLabel}"
                         .alignment="${TextAlignment.Center}"></mosaik-text>
            `)}
            ${repeat(dayNames(dayNamesIntl, e.firstDayOfWeek), (dayName) => dayName, (dayName) => html `
            <mosaik-text part="dayLabel"
                         .dir="${e.dir}"
                         .text="${dayName}"
                         .alignment="${TextAlignment.Center}"></mosaik-text>
            `)}
        </div>
        <div part="dayView"
             class="${e.showWeekNumbers ? 'week-numbers' : ''}">
            ${when(e.showAdjacent, () => html `
            <!-- adjacent days before the start of the month -->
            ${Array.from({ length: firstDay }, (_, i) => new Date(year, month, -i)).reverse()
        .map((day) => html `
            <mosaik-calendar-item part="item"
                                  .dir="${e.dir}"
                                  .text="${day.getDate().toLocaleString()}"
                                  .value="${day}"
                                  .markers="${e.markerHandler(day)}"
                                  .variant="${e.variant}"
                                  .appearance="${e.appearance}"
                                  ?is-adjacent="${true}"
                                  ?is-selected="${isDataSelected(day)}"
                                  ?is-blackout="${isDateInDates(day, e.blackoutDates)}"
                                  ?is-special="${isDateInDates(day, e.specialDates)}"
                                  ?is-today="${e.isTodayHighlighted ? isToday(day) : false}"
                                  ?is-weekend="${e.isWeekendHighlighted ? isWeekendDay(day) : false}"
                                  ?disabled="${e.disabled && e.isDateInRange(day)}"
                                  @click="${() => e.selectAdjacentDay('previous', day)}"></mosaik-calendar-item>
            `)}
            `, () => html `
            <!-- empty days before the start of the month -->
            ${Array.from({ length: firstDay }, () => null).map(() => html `<div class="empty"></div>`)}
            `)}
            <!-- days of the month -->
            ${Array.from({ length: daysInMonth }, (_, i) => new Date(year, month, i + 1)).map((day, i) => html `
            <!-- week numbers -->
            ${when(e.showWeekNumbers && (i % 7 === 0), () => html `
            <div part="weekNumber">
                <mosaik-text .dir="${e.dir}"
                             .text="${getWeekNumber(day).toString()}"
                             ?disabled="${e.disabled}"></mosaik-text>
            </div>
            `)}
            <mosaik-calendar-item part="item"
                                  .dir="${e.dir}"
                                  .text="${day.getDate().toLocaleString()}"
                                  .value="${day}"
                                  .markers="${e.markerHandler(day)}"
                                  .variant="${e.variant}"
                                  .appearance="${e.appearance}"
                                  ?is-adjacent="${false}"
                                  ?is-selected="${isDataSelected(day)}"
                                  ?is-blackout="${isDateInDates(day, e.blackoutDates)}"
                                  ?is-special="${isDateInDates(day, e.specialDates)}"
                                  ?is-today="${e.isTodayHighlighted ? isToday(day) : false}"
                                  ?is-weekend="${e.isWeekendHighlighted ? isWeekendDay(day) : false}"
                                  ?disabled="${e.disabled && e.isDateInRange(day)}"
                                  @click="${() => e.selectDay(day)}"></mosaik-calendar-item>
            `)}
            ${when(e.showAdjacent, () => html `
            <!-- adjacent days after the end of the month -->
            ${Array.from({ length: 7 - lastDay }, (_, i) => new Date(year, month + 1, i + 1)).map((day) => html `
            <mosaik-calendar-item part="item"
                                  .dir="${e.dir}"
                                  .text="${day.getDate().toLocaleString()}"
                                  .value="${day}"
                                  .markers="${e.markerHandler(day)}"
                                  .variant="${e.variant}"
                                  .appearance="${e.appearance}"
                                  ?is-adjacent="${true}"
                                  ?is-selected="${isDataSelected(day)}"
                                  ?is-blackout="${isDateInDates(day, e.blackoutDates)}"
                                  ?is-special="${isDateInDates(day, e.specialDates)}"
                                  ?is-today="${e.isTodayHighlighted ? isToday(day) : false}"
                                  ?is-weekend="${e.isWeekendHighlighted ? isWeekendDay(day) : false}"
                                  ?disabled="${e.disabled && e.isDateInRange(day)}"
                                  @click="${() => e.selectAdjacentDay('next', day)}"
                                  @mouseenter=${() => e.changeRangePreview(day)}
                                  @mouseleave=${() => e.clearRangePreview()}
                                  @focus=${() => e.changeRangePreview(day)}
                                  @blur=${() => e.clearRangePreview()}></mosaik-calendar-item>
            `)}
            `, () => html `
            <!-- empty days after the end of the month -->
            ${Array.from({ length: 6 - lastDay }, () => null).map(() => html `<div class="empty"></div>`)}
            `)}
        </div>
    `;
}
//# sourceMappingURL=CalendarDaysViewElementTemplate.js.map