// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { setHost } from '../../../Directives/setHost';
import { Appearance } from '../../../Types/Appearance';
import { CalendarView } from '../../../Types/CalendarView';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * Generates display dates for multiple calendar sheets.
 *
 * @param baseDate - The base date to start from
 * @param view - The calendar view (Day, Month, Year)
 * @param sheets - The number of sheets to generate
 * @returns Array of dates for each sheet
 */
function generateSheetDates(baseDate, view, sheets) {
    if (!baseDate || sheets <= 1) {
        return baseDate ? [new Date(baseDate)] : [new Date()];
    }
    const dates = new Array();
    for (let i = 0; i < sheets; i++) {
        const sheetDate = new Date(baseDate);
        switch (view) {
            case CalendarView.Year:
                sheetDate.setFullYear(baseDate.getFullYear() + (i * 13));
                break;
            case CalendarView.Month:
                sheetDate.setFullYear(baseDate.getFullYear() + i);
                break;
            case CalendarView.Day:
            default:
                sheetDate.setMonth(baseDate.getMonth() + i);
                break;
        }
        dates.push(sheetDate);
    }
    return dates;
}
/**
 * Renders a single calendar sheet.
 *
 * @param e - The calendar element
 * @param displayDate - The display date for this sheet
 * @param sheetIndex - The index of this sheet (0-based)
 * @returns Template result for a single sheet
 */
function renderCalendarSheet(e, displayDate, sheetIndex) {
    // Day view (default)
    if (e.view === CalendarView.Day) {
        return html `
            <mosaik-calendar-days-view part="daysView"
                                       data-sheet-index="${sheetIndex}"
                                       .dir="${e.dir}"
                                       .blackoutDates="${e.blackoutDates}"
                                       .specialDates="${e.specialDates}"
                                       .firstDayOfWeek="${e.firstDayOfWeek}"
                                       .showWeekNumbers="${e.showWeekNumbers}"
                                       .showAdjacent="${e.showAdjacent}"
                                       .markerHandler="${e.markerHandler}"
                                       .value="${e.value ?? undefined}"
                                       .values="${e.values}"
                                       .intl="${e.intl}"
                                       .variant="${e.variant}"
                                       .appearance="${e.appearance}"
                                       .locale="${e.locale}"
                                       .selection="${e.selectionMode}"
                                       .displayDate="${displayDate}"
                                       .displayDateStart="${e.displayDateStart}"
                                       .displayDateEnd="${e.displayDateEnd}"
                                       ?isTodayHighlighted="${e.isTodayHighlighted}"
                                       ?isWeekendHighlighted="${e.isWeekendHighlighted}"
                                       ?disabled="${e.disabled}"
                                       @valueChanged="${(x) => e.onValueChanged(x.detail)}"
                                       @viewChanged="${(x) => e.onViewChanged(x.detail)}">
                ${sheetIndex === 0
            ? html `
                    <div part="navigation" slot="header">
                        <mosaik-button-group .dir="${e.dir}"
                                             .lang="${e.lang}"
                                             .appearance="${'plain'}"
                                             ?disabled="${e.disabled}">
                            <mosaik-button part="previous"
                                           .icon="${Icons.caretUp}"
                                           .iconSize="${'small'}"
                                           @click="${() => e.navigatePrevious()}"></mosaik-button>
                            <mosaik-button part="today"
                                           .icon="${Icons.today}"
                                           .iconSize="${'small'}"
                                           @click="${() => e.navigateToday()}"></mosaik-button>
                            <mosaik-button part="next"
                                           .icon="${Icons.caretDown}"
                                           .iconSize="${'small'}"                                           ?disabled="${e.disabled}"
                                           @click="${() => e.navigateNext()}"></mosaik-button>
                        </mosaik-button-group>
                    </div>
                `
            : ''}
            </mosaik-calendar-days-view>
        `;
    }
    // Month view
    if (e.view === CalendarView.Month) {
        return html `
            <mosaik-calendar-months-view part="monthView"
                                         data-sheet-index="${sheetIndex}"
                                         .dir="${e.dir}"
                                         .blackoutDates="${e.blackoutDates}"
                                         .specialDates="${e.specialDates}"
                                         .markerHandler="${e.markerHandler}"
                                         .value="${e.value ?? undefined}"
                                         .intl="${e.intl}"
                                         .variant="${e.variant}"
                                         .appearance="${e.appearance}"
                                         .locale="${e.locale}"
                                         .selection="${e.selectionMode}"
                                         .displayDate="${displayDate}"
                                         .displayDateStart="${e.displayDateStart}"
                                         .displayDateEnd="${e.displayDateEnd}"
                                         ?disabled="${e.disabled}"
                                         @valueChanged="${(x) => e.onValueChanged(x.detail)}"
                                         @viewChanged="${(x) => e.onViewChanged(x.detail)}">
                ${sheetIndex === 0
            ? html `
                    <div part="navigation" slot="header">
                        <mosaik-button-group .dir="${e.dir}"
                                             .appearance="${Appearance.Plain}"
                                             ?disabled="${e.disabled}">
                            <mosaik-button part="previous"
                                           .icon="${Icons.caretUp}"
                                           .iconSize="${Size.Small}"
                                           ?disabled="${e.disabled}"
                                           @click="${() => e.navigatePrevious()}"></mosaik-button>
                            <mosaik-button part="today"
                                           .icon="${Icons.today}"
                                           .iconSize="${Size.Small}"
                                           ?disabled="${e.disabled}"
                                           @click="${() => e.navigateToday()}"></mosaik-button>
                            <mosaik-button part="next"
                                           .icon="${Icons.caretDown}"
                                           .iconSize="${Size.Small}"
                                           ?disabled="${e.disabled}"
                                           @click="${() => e.navigateNext()}"></mosaik-button>
                        </mosaik-button-group>
                    </div>
                `
            : ''}
            </mosaik-calendar-months-view>
        `;
    }
    // Year view
    return html `
        <mosaik-calendar-years-view part="yearsView"
                                    data-sheet-index="${sheetIndex}"
                                    .dir="${e.dir}"
                                    .blackoutDates="${e.blackoutDates}"
                                    .specialDates="${e.specialDates}"
                                    .markerHandler="${e.markerHandler}"
                                    .value="${e.value ?? undefined}"
                                    .intl="${e.intl}"
                                    .variant="${e.variant}"
                                    .appearance="${e.appearance}"
                                    .locale="${e.locale}"
                                    .selection="${e.selectionMode}"
                                    .displayDate="${displayDate}"
                                    .displayDateStart="${e.displayDateStart}"
                                    .displayDateEnd="${e.displayDateEnd}"
                                    ?disabled="${e.disabled}"
                                    @valueChanged="${(x) => e.onValueChanged(x.detail)}"
                                    @viewChanged="${(x) => e.onViewChanged(x.detail)}">
            ${sheetIndex === 0
        ? html `
                <div part="navigation" slot="header">
                    <mosaik-button-group .dir="${e.dir}"
                                         .appearance="${Appearance.Plain}"
                                         ?disabled="${e.disabled}">
                        <mosaik-button part="previous"
                                       .icon="${Icons.caretUp}"
                                       .iconSize="${Size.Small}"
                                       ?disabled="${e.disabled}"
                                       @click="${() => e.navigatePrevious()}"></mosaik-button>
                        <mosaik-button part="today"
                                       .icon="${Icons.today}"
                                       .iconSize="${Size.Small}"
                                       ?disabled="${e.disabled}"
                                       @click="${() => e.navigateToday()}"></mosaik-button>
                        <mosaik-button part="next"
                                       .icon="${Icons.caretDown}"
                                       .iconSize="${Size.Small}"
                                       ?disabled="${e.disabled}"
                                       @click="${() => e.navigateNext()}"></mosaik-button>
                    </mosaik-button-group>
                </div>
            `
        : ''}
        </mosaik-calendar-years-view>
    `;
}
/**
 * The template of the `CalendarElement`.
 *
 * @public
 */
export function calendarElementTemplate(e) {
    const sheetDates = generateSheetDates(e.displayDate, e.view, e.sheets);
    const isMultiSheet = e.sheets > 1;
    return html `
        <mosaik-stack .dir="${e.dir}"
                      .orientation="${e.orientation}">
            <div part="header"
                 ?hidden="${!setHost(e, 'has-header', e.header.trim().length > 0)}">
                <mosaik-calendar-header .dir="${e.dir}"
                                        .text="${e.header}"
                                        ?disabled="${e.disabled}"></mosaik-calendar-header>
                <mosaik-calendar-sub-header .dir="${e.dir}"
                                            .text="${e.value ? e.value.toLocaleString(e.locale, { day: 'numeric', month: 'long', year: 'numeric' }) : ''}"
                                            ?disabled="${e.disabled}"></mosaik-calendar-sub-header>
            </div>
            <div part="content" class="${isMultiSheet ? 'multi-sheet' : 'single-sheet'}">
                ${isMultiSheet
        ? html `
                    <mosaik-stack .dir="${e.dir}"
                                  .orientation="${e.orientation}"
                                  part="sheets-container">
                        ${sheetDates.map((date, index) => html `
                            <div part="sheet" data-sheet-index="${index}">
                                ${renderCalendarSheet(e, date, index)}
                            </div>
                        `)}
                    </mosaik-stack>
                `
        : html `
                    ${renderCalendarSheet(e, sheetDates[0], 0)}
                `}
            </div>
            <slot name="footer"></slot>
        </mosaik-stack>
    `;
}
//# sourceMappingURL=CalendarElementTemplate.js.map