// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { getDayKey } from '../../../../../Extensions/DateExtensions';
import { DateFormatter } from '../../../../../Intl/Formatters/DateFormatter';
import { TimeFormatter } from '../../../../../Intl/Formatters/TimeFormatter';
import { Attribute } from '../../../../Decorators/AttributeDecorator';
import { Component } from '../../../../Decorators/ComponentDecorator';
import { Watch } from '../../../../Decorators/WatchDecorator';
import { SchedulerDatescaleElement } from '../SchedulerDatescaleElement';
import { SchedulerViewBaseElement } from './Abstracts/SchedulerViewBaseElement';
import { ISchedulerAgendaViewElementProps } from './ISchedulerAgendaViewElementProps';
import { schedulerAgendaViewElementTemplate } from './SchedulerAgendaViewElementTemplate';
import { schedulerAgendaViewElementCosmopolitanStyle } from './Themes/SchedulerAgendaViewElement.Cosmopolitan';
import { schedulerAgendaViewElementJoyStyle } from './Themes/SchedulerAgendaViewElement.Joy';
import { schedulerAgendaViewElementMemphisStyle } from './Themes/SchedulerAgendaViewElement.Memphis';
/**
 * Scheduler Agenda View - A chronological list view of events.
 *
 * @description
 * The Agenda view displays events in a vertical list format, grouped by day.
 * Each day shows the date on the left via the datescale component, and the
 * event details on the right. This view is ideal for seeing upcoming events
 * at a glance without the visual overhead of a calendar grid.
 *
 * @name Scheduler Agenda View
 * @element mosaik-scheduler-agenda-view
 * @category Scheduler
 *
 * @slot empty-state - The empty-state slot.
 * @slot event-${item.events[0].eventKey} - The event-${item.events[0].eventKey} slot.
 *
 * @csspart body - The body containing datescale and events
 * @csspart container - The main container
 * @csspart datescale - The datescale component on the left
 * @csspart empty-state - Shown when no events exist
 * @csspart event-content - The event content area
 * @csspart event-indicator - The colored indicator bar
 * @csspart events-wrapper - The wrapper for event rows
 *
 * @cssprop {Color} --scheduler-agenda-view-background-color - Background color of the view
 * @cssprop {Color} --scheduler-agenda-view-border-color - Border color
 * @cssprop {String} --scheduler-agenda-view-border-radius - Border radius
 * @cssprop {String} --scheduler-agenda-view-border-style - Border style
 * @cssprop {String} --scheduler-agenda-view-border-width - Border width
 * @cssprop {String} --scheduler-agenda-view-day-header-font-size - Font size for day headers
 * @cssprop {String} --scheduler-agenda-view-day-header-font-weight - Font weight for day headers
 * @cssprop {String} --scheduler-agenda-view-event-item-padding-bottom - Bottom padding for event items
 * @cssprop {String} --scheduler-agenda-view-event-item-padding-left - Left padding for event items
 * @cssprop {String} --scheduler-agenda-view-event-item-padding-right - Right padding for event items
 * @cssprop {String} --scheduler-agenda-view-event-item-padding-top - Top padding for event items
 * @cssprop {String} --scheduler-agenda-view-event-row-min-height - Minimum height for event rows
 * @cssprop {String} --scheduler-agenda-view-event-time-font-size - Font size for event time display
 * @cssprop {String} --scheduler-agenda-view-event-title-font-size - Font size for event titles
 * @cssprop {String} --scheduler-agenda-view-event-title-font-weight - Font weight for event titles
 * @cssprop {String} --scheduler-agenda-view-font-family - The agenda view font family CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-font-letter-spacing - The agenda view font letter spacing CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-font-line-height - The agenda view font line height CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-font-size - The agenda view font size CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-font-text-decoration - The agenda view font text decoration CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-font-text-transform - The agenda view font text transform CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-font-weight - The agenda view font weight CSS custom property.
 * @cssprop {Color} --scheduler-agenda-view-foreground-color - Foreground/text color
 * @cssprop {String} --scheduler-agenda-view-gap - Gap between elements
 * @cssprop {String} --scheduler-agenda-view-padding-bottom - Bottom padding
 * @cssprop {String} --scheduler-agenda-view-padding-left - Left padding
 * @cssprop {String} --scheduler-agenda-view-padding-right - Right padding
 * @cssprop {String} --scheduler-agenda-view-padding-top - Top padding
 * @cssprop {String} --scheduler-agenda-view-shadow - The agenda view shadow CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-shadow-blur - The agenda view shadow blur CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-shadow-color - The agenda view shadow color CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-shadow-offset-x - The agenda view shadow offset x CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-shadow-offset-y - The agenda view shadow offset y CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-shadow-spread - The agenda view shadow spread CSS custom property.
 * @cssprop {Color} --scheduler-agenda-view-today-background-color - Background color for today's row
 * @cssprop {String} --scheduler-agenda-view-transition-duration - The agenda view transition duration CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-transition-mode - The agenda view transition mode CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-transition-property - The agenda view transition property CSS custom property.
 * @cssprop {String} --scheduler-agenda-view-translate - The agenda view translate CSS custom property.
 * @cssprop {Color} --scheduler-agenda-view-weekend-background-color - Background color for weekend rows
 *
 * @dependency mosaik-empty-state - The Empty State element.
 * @dependency mosaik-scheduler-datescale - The Scheduler Datescale element.
 *
 * @example
 * ```html
 * <mosaik-scheduler-agenda-view days-ahead="14"></mosaik-scheduler-agenda-view>
 * ```
 *
 * @public
 */
let SchedulerAgendaViewElement = class SchedulerAgendaViewElement extends SchedulerViewBaseElement {
    // #region Fields
    _daysAhead;
    _agendaItems;
    _datescaleItems;
    // #endregion
    // #region Ctor
    constructor() {
        super();
        this._daysAhead = ISchedulerAgendaViewElementProps.DEFAULTS.daysAhead;
        this._agendaItems = [];
        this._datescaleItems = [];
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-scheduler-agenda-view';
    }
    /**
     * Gets the layout mode for this view.
     *
     * @public
     * @override
     * @readonly
     */
    get view() {
        return 'agenda';
    }
    /**
     * Gets or sets the number of days ahead to display.
     *
     * @public
     * @attr
     */
    get daysAhead() {
        return this._daysAhead;
    }
    set daysAhead(value) {
        if (this._daysAhead !== value) {
            this._daysAhead = value;
            this.requestUpdate('daysAhead');
        }
    }
    /**
     * Gets the agenda items for rendering.
     *
     * @public
     * @readonly
     */
    get agendaItems() {
        return this._agendaItems;
    }
    /**
     * Gets the datescale items for the datescale component.
     *
     * @public
     * @readonly
     */
    get datescaleItems() {
        return this._datescaleItems;
    }
    /**
     * Returns whether there are any events to display.
     *
     * @public
     * @readonly
     */
    get hasEvents() {
        return this._agendaItems.length > 0;
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        this.buildAgendaList();
    }
    /**
     * Formats the time range for display.
     *
     * @public
     * @param startTime - The start time.
     * @param endTime - The end time.
     * @returns Formatted time range string.
     */
    formatTimeRange(startTime, endTime) {
        const startFormatted = TimeFormatter.format(startTime, this.timeFormat, this.locale);
        const endFormatted = TimeFormatter.format(endTime, this.timeFormat, this.locale);
        return `${startFormatted} - ${endFormatted}`;
    }
    onPropertyChanged() {
        this.buildAgendaList();
    }
    buildAgendaList() {
        // Normalize start date to midnight for proper day-based filtering
        const startBase = this.effectiveStartDate;
        const start = new Date(startBase.getFullYear(), startBase.getMonth(), startBase.getDate(), 0, 0, 0, 0);
        const end = new Date(start);
        end.setDate(end.getDate() + this.daysAhead);
        end.setHours(23, 59, 59, 999); // End of day
        const today = new Date();
        const todayKey = getDayKey(today);
        // Filter and sort events within the date range
        const eventsInRange = this.collectedEvents
            .filter(event => {
            const eventDate = event.startTime;
            return eventDate >= start && eventDate <= end;
        })
            .sort((a, b) => a.startTime.getTime() - b.startTime.getTime());
        // Group events by day
        const eventsByDay = new Map();
        for (const event of eventsInRange) {
            const dayKey = getDayKey(event.startTime);
            if (!eventsByDay.has(dayKey)) {
                eventsByDay.set(dayKey, []);
            }
            eventsByDay.get(dayKey).push(event);
        }
        // Build agenda items and datescale items
        this._agendaItems = [];
        this._datescaleItems = [];
        for (const [_dayKey, events] of eventsByDay) {
            const firstEvent = events[0];
            const date = firstEvent.startTime;
            const dayKey = getDayKey(date);
            const isToday = dayKey === todayKey;
            const isWeekend = this.isWeekend(date);
            const isBlackout = this.isBlackoutDate(date);
            for (let i = 0; i < events.length; i++) {
                const event = events[i];
                const isFirstEventOfDay = i === 0;
                this._agendaItems.push({
                    date: event.startTime,
                    dayNumber: date.getDate(),
                    weekdayShort: DateFormatter.format(date, this.weekdayFormat, this.locale),
                    isToday,
                    isWeekend,
                    isBlackout,
                    isFirstEventOfDay,
                    events: [{
                            eventKey: event.eventKey,
                            startTime: event.startTime,
                            endTime: event.endTime,
                            element: event.element
                        }]
                });
                // Build matching datescale item
                this._datescaleItems.push({
                    date: event.startTime,
                    dayNumber: date.getDate(),
                    weekdayLabel: DateFormatter.format(date, this.weekdayFormat, this.locale),
                    isFirstOfDate: isFirstEventOfDay,
                    isToday,
                    isWeekend,
                    isBlackout
                });
            }
        }
        this.requestUpdate('agendaItems');
        this.requestUpdate('datescaleItems');
    }
};
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], SchedulerAgendaViewElement.prototype, "daysAhead", null);
__decorate([
    Watch('startDate'),
    Watch('daysAhead'),
    Watch('collectedEvents'),
    Watch('weekdayFormat'),
    Watch('locale'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], SchedulerAgendaViewElement.prototype, "onPropertyChanged", null);
SchedulerAgendaViewElement = __decorate([
    Component({
        selector: 'mosaik-scheduler-agenda-view',
        template: schedulerAgendaViewElementTemplate,
        themes: {
            joy: schedulerAgendaViewElementJoyStyle,
            cosmopolitan: schedulerAgendaViewElementCosmopolitanStyle,
            memphis: schedulerAgendaViewElementMemphisStyle
        },
        imports: [
            SchedulerDatescaleElement
        ]
    }),
    __metadata("design:paramtypes", [])
], SchedulerAgendaViewElement);
export { SchedulerAgendaViewElement };
//# sourceMappingURL=SchedulerAgendaViewElement.js.map