// #region Imports
import { html } from '../../../../../Dom/Html';
import { formatDateToIso, formatTime } from '../../../../../Extensions/DateExtensions';
import { repeat, when } from '../../../../Directives/Directives';
import { interpolate } from '../../../../Directives/Interpolate/InterpolateDirective';
import { partMap } from '../../../../Directives/part-map/PartMapDirective';
// #endregion
/**
 * The template function for the {@link SchedulerMonthViewElement}.
 *
 * @internal
 */
export function schedulerMonthViewElementTemplate(e) {
    return html `
        <div part="container">
            <div part="header">
                ${when(e.showWeekNumbers, () => html `
                    <div part="week-number-header"></div>
                `)}
                ${repeat(e.weekdayHeaders, (header, index) => index, (header) => html `
                    <div part="header-cell">${header}</div>
                `)}
            </div>
            <div part="body">
                ${repeat(e.weeks, (week) => week.weekNumber, (week) => html `
                    <div part="week-row">
                        ${when(e.showWeekNumbers, () => html `
                            <div part="week-number">${week.weekNumber}</div>
                        `)}
                        ${repeat(week.days, (day) => formatDateToIso(day.date), (day) => html `
                            ${when(!e.showAdjacent && !day.isCurrentMonth, () => html `
                                <div part="day-cell day-cell-empty"></div>
                            `, () => html `
                                <div part=${partMap({ 'day-cell': true, 'is-today': day.isToday, 'is-weekend': day.isWeekend, 'is-adjacent': !day.isCurrentMonth, 'is-blackout': day.isBlackout, 'is-special': day.isSpecial })}
                                     data-date="${formatDateToIso(day.date)}"
                                     @click="${() => e.onDayCellClick(day.date)}">
                                    <span part="day-number">${day.dayNumber === 1 && !day.isCurrentMonth ? new Intl.DateTimeFormat(e.locale, { month: 'short', day: 'numeric' }).format(day.date) : String(day.dayNumber)}</span>
                                    <div part="day-events">
                                        ${repeat(day.events.slice(0, 3), (event) => event.eventKey, (event) => html `
                                            <div part="event-chip"
                                                 data-event-key="${event.eventKey}"
                                                 @click="${(ev) => { ev.stopPropagation(); e.onEventClick(ev, event.eventKey); }}"
                                                 @keydown="${(ev) => e.onEventKeydown(ev, event.eventKey)}">
                                                <span part="event-time">${formatTime(event.startTime, e.locale)}</span>
                                                <slot name="event-${event.eventKey}"></slot>
                                            </div>
                                        `)}
                                        ${when(day.events.length > 3, () => html `
                                            <mosaik-hint part="more-events"
                                                         .text="${interpolate(e.intl?.moreEventsLabel ?? '', day.events.length - 3)}"></mosaik-hint>
                                        `)}
                                    </div>
                                </div>
                            `)}
                        `)}
                    </div>
                `)}
            </div>
        </div>
        <div part="events-slot" hidden>
            <slot></slot>
        </div>
    `;
}
//# sourceMappingURL=SchedulerMonthViewElementTemplate.js.map