// #region Imports
import { html } from '../../../../../Dom/Html';
import { formatDateToIso, getDayNumber, getWeekdayName } from '../../../../../Extensions/DateExtensions';
import { repeat, styleMap, when } from '../../../../Directives/Directives';
import { partMap } from '../../../../Directives/part-map/PartMapDirective';
// #endregion
/**
 * The template function for the `SchedulerTimeGridViewElement`.
 *
 * @internal
 */
export function schedulerTimeGridViewElementTemplate(e) {
    return html `
        <div part="container">
            <div part="header">
                <div part="header-row">
                    <div part="header-spacer"></div>
                    <div part="header-columns">
                        ${repeat(e.visibleDates, (date) => formatDateToIso(date), (date) => html `
                        <div part=${partMap({ 'header-cell': true, 'is-today': e.isTodayHighlighted && e.isToday(date), 'is-weekend': e.isWeekendHighlighted && e.isWeekend(date), 'is-blackout': e.isBlackoutDate(date), 'is-special': e.isSpecialDate(date) })}
                             style="${styleMap({ width: `${100 / e.days}%` })}">
                            <span part="header-weekday">${getWeekdayName(date, e.locale)}</span>
                            <span part="header-day">${getDayNumber(date)}</span>
                        </div>
                        `)}
                    </div>
                </div>
                ${when(((e.hasAllDayEvents && e.allDayVisibility !== 'never') || e.allDayVisibility === 'always'), () => html `
                    <div part="all-day-panel">
                        <div part="all-day-label">${e.intl?.allDayLabel ?? 'All day'}</div>
                        <div part="all-day-row">
                            ${repeat(e.visibleDates, (date) => formatDateToIso(date), (date) => html `
                            <div part=${partMap({ 'all-day-cell': true, 'is-weekend': e.isWeekendHighlighted && e.isWeekend(date), 'is-blackout': e.isBlackoutDate(date), 'is-today': e.isTodayHighlighted && e.isToday(date), 'is-special': e.isSpecialDate(date) })}
                                 style="${styleMap({ width: `${100 / e.days}%` })}"
                                 data-date="${formatDateToIso(date)}"
                                 @click="${() => e.onAllDayCellClick(date)}">
                            </div>
                            `)}
                            <div part="all-day-events">
                                ${repeat(e.getAllDayEvents(), (event) => event.eventKey, (event) => html `
                                    <div part=${partMap({ 'all-day-event': true, 'overflow-start': event.overflowStart, 'overflow-end': event.overflowEnd })}
                                         style="${styleMap({ left: `${event.dayIndex * (100 / e.days)}%`, width: `${Math.min(event.spanDays, e.days - event.dayIndex) * (100 / e.days)}%` })}"
                                         data-event-key="${event.eventKey}"
                                         @click="${(ev) => e.onEventClick(ev, event.eventKey)}"
                                         @keydown="${(ev) => e.onEventKeydown(ev, event.eventKey)}">
                                        <slot name="allday-${event.eventKey}"></slot>
                                    </div>
                                `)}
                            </div>
                        </div>
                    </div>
                `)}
            </div>
            <div part="body">
                <mosaik-scheduler-timescale part="timescale"
                                            .locale="${e.locale}"
                                            .hourStart="${e.hourStart}"
                                            .hourEnd="${e.hourEnd}"
                                            .stepMinutes="${e.stepMinutes}"></mosaik-scheduler-timescale>
                <div part="grid-wrapper">
                    <div part="grid">
                        ${repeat(e.timeSlots, (slot) => slot.time, (slot) => html `
                        <div part=${partMap({ 'grid-row': true, 'is-hour': slot.isHour, 'is-last-of-hour': slot.isLastOfHour })}>
                            ${repeat(e.visibleDates, (date) => formatDateToIso(date), (date) => html `
                            <div part=${partMap({ 'grid-cell': true, 'is-today': e.isTodayHighlighted && e.isToday(date), 'is-weekend': e.isWeekendHighlighted && e.isWeekend(date), 'is-blackout': e.isBlackoutDate(date), 'is-special': e.isSpecialDate(date) })}
                                 style="${styleMap({ width: `${100 / e.days}%` })}"
                                 data-date="${formatDateToIso(date)}"
                                 data-time="${slot.time}"
                                 @click="${() => e.onGridCellClick(date, slot.time)}">
                            </div>
                            `)}
                        </div>
                        `)}
                    </div>
                    <div part="appointments">
                        ${repeat(e.visibleDates, (date) => formatDateToIso(date), (date, index) => html `
                        <div part="appointment-column"
                             style="${styleMap({ left: `${index * (100 / e.days)}%`, width: `${100 / e.days}%` })}">
                            ${repeat(e.getEventsForDay(formatDateToIso(date)), (event) => event.eventKey, (event) => html `
                                <div part="event"
                                     style="${styleMap({ top: `${event.top}%`, height: `${event.height}%`, left: `${event.left}%`, width: `${event.width}%` })}"
                                     data-event-key="${event.eventKey}"
                                     @click="${(ev) => e.onEventClick(ev, event.eventKey)}"
                                     @keydown="${(ev) => e.onEventKeydown(ev, event.eventKey)}">
                                    <slot name="event-${event.eventKey}"></slot>
                                </div>
                            `)}
                        </div>
                        `)}
                        ${when(e.visibleDates.some((d) => e.isToday(d)), () => html `
                        <mosaik-scheduler-now-indicator part="indicator"
                                                        .top="${e.getNowIndicatorTop()}"
                                                        .visible="${e.getNowIndicatorTop() >= 0}"></mosaik-scheduler-now-indicator>
                        `)}
                    </div>
                </div>
            </div>
        </div>
        <div part="events-slot" hidden>
            <slot></slot>
        </div>
    `;
}
//# sourceMappingURL=SchedulerTimeGridViewElementTemplate.js.map