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;
};
import { h } from '@stencil/core';
import { MapToComponentField } from 'vega-slimmer/core';
import { WeekdayLongNames } from '../../../../../helpers/calendar/utils';
import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
import { VegaCalendarDateBlockRenderer, } from '../../common/renderers/vega-calendar-date-block-renderer.abstract';
import { checkIsVoiceOverClick } from '../../../../../utils/ui';
/** The code provided is defining a TypeScript class called `VegaCalendarMonthViewRenderer` that extends `VegaSlimmer`. This class is responsible for rendering a month view of a calendar component. */
export class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer {
  /**
   * the HTML elements that represent the month view of a calendar component.
   *
   * @returns {HTMLElement} the month view calendar content
   */
  render() {
    const weekHead = this.calendarView.weekdays;
    return (h("div", { class: "calendar-view-month-container" },
      h("div", { class: "calendar-view-row calendar-view-title border-divider-bottom" }, weekHead.map((title) => (h("div", { key: title, role: "group", tabIndex: -1, "aria-label": this.translationSlimmer.t(WeekdayLongNames[title.toLowerCase()]) },
        h("span", { "aria-hidden": "true" }, this.translationSlimmer.t(title)))))),
      this.renderMonthViewContent()));
  }
  /**
   * emit vega click event when click the date block
   *
   * @param {MouseEvent} e the mouse event object
   * @param {CalendarDate} calendarDate the calendar date object
   */
  handleDateBlockClick(e, calendarDate) {
    const { target, clientX, clientY } = e;
    if (this.isMonthBlockBlankArea(target)) {
      const { year, month, date } = calendarDate;
      const eventInfo = {
        year,
        month,
        date,
        hour: 0,
        mouseEventInfo: { clientX, clientY },
      };
      this.emit(e, eventInfo);
    }
  }
  /**
   * generating the HTML elements that represent the content of the month view in a calendar component
   *
   * @returns {HTMLElement[]} month view content and event content
   */
  renderMonthViewContent() {
    const monthSource = this.calendarView.dateItems;
    const currentDate = this.currentPeriod.current;
    return monthSource.map((dateArray, index) => {
      const eventsArray = this.monthEventRenderer.getCurrentRowEvents(dateArray);
      const displayEventsArray = this.monthEventRenderer.filterRowDisplayEvents(eventsArray);
      return (h("div", { key: index, class: "calendar-view-row border-divider-bottom" }, dateArray.map((item, itemIndex) => {
        var _a;
        const isDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, item.toDate());
        const renderProps = this.generateDateBlockRenderProps(isDisabled, item);
        // TODO(VD-8327): Date i18n for aria-label is not yet resolved—still deciding between
        // toLocaleDateString with predefined rules vs. allowing client customizations.
        // Will be addressed in VD-8327.
        const dateLabel = `${item.getMonthName()} ${item.date} ${item.year}`;
        return (h("div", Object.assign({ class: {
            'row-cell border-divider-right': true,
            'current-month-day': item.compare(currentDate).inMonth,
            'active': item.isToday(this.timezone),
            'disabled': isDisabled,
          }, key: `${item.month}-${item.date}` }, renderProps, { tabindex: this.enableDateClick ? 0 : undefined, role: this.enableDateClick ? 'button' : undefined, "aria-disabled": isDisabled ? 'true' : undefined, "aria-label": this.enableDateClick ? dateLabel : undefined }),
          this.renderDateBlock(item),
          this.monthEventRenderer.render(item, eventsArray[itemIndex], displayEventsArray[itemIndex], itemIndex)));
      })));
    });
  }
  /**
   * It takes a `CalendarDate` object as a parameter and returns an HTML element representing a date block in the calendar view.
   *
   * @param {CalendarDate} item the day object
   * @returns {HTMLElement} the date block element
   */
  renderDateBlock(item) {
    const isMonthFirstDay = item.date === 1;
    const isDateClickable = this.showSwitchView && this.enableDateClick;
    // TODO(VD-8327): Date i18n for aria-label is not yet resolved—still deciding between
    // toLocaleDateString with predefined rules vs. allowing client customizations.
    // Will be addressed in VD-8327.
    const dateLabel = `${item.getMonthName()} ${item.date} ${item.year}`;
    return (h("div", { class: "date" },
      isMonthFirstDay && (h("div", { role: "group", "aria-label": item.getMonthName(), class: "month-block" }, item.getMonthName(true))),
      h("div", { "aria-label": this.enableDateClick ? undefined : dateLabel, role: isDateClickable ? 'button' : 'group', "aria-disabled": isDateClickable ? 'false' : undefined, tabIndex: 0, class: "grid-col", 
        // eslint-disable-next-line react/jsx-no-bind
        onDblClick: (e) => {
          this.handleDateLabelClick(e, item);
        }, 
        // eslint-disable-next-line react/jsx-no-bind
        onClick: (e) => {
          this.handleDateLabelClick(e, item);
        }, onKeyDown: createEnterKeyHandlerToTriggerClick() }, item.date)));
  }
  /**
   * switch to current date day view
   *
   * @param {CalendarDate} calendarDate the calendar date object
   * @param {MouseEvent} e the mouse event object
   */
  goToCurrentDayView(calendarDate, e) {
    this.currentPeriodController.updateCalendarPeriod('day', calendarDate);
    if (checkIsVoiceOverClick(e)) {
      this.dayViewFocusSlimmer.scheduleFocus();
    }
  }
  /**
   * Handler for clicking on the date label.
   *
   * @param {MouseEvent} e - the mouse event object
   * @param {CalendarDate} calendarDate - the calendar date object
   */
  handleDateLabelClick(e, calendarDate) {
    e.stopPropagation();
    // only when showSwitchView is true, the double click event can switch to day view
    if (!this.showSwitchView)
      return;
    if (this.shouldHandleClickEvent(e)) {
      this.goToCurrentDayView(calendarDate, e);
    }
    else if (this.shouldHandleDblClickEvent(e)) {
      this.goToCurrentDayView(calendarDate, e);
    }
  }
  /**
   * determine if the clicked element is blank area
   *
   * @param {HTMLElement} element the target element
   * @returns {boolean} true or false
   */
  isMonthBlockBlankArea(element) {
    // the more button and the calendar event component should not trigger dateDblClick event
    return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
  }
}
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "translationSlimmer", void 0);
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "isDateDisabled", void 0);
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "showSwitchView", void 0);
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "timezone", void 0);
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaCalendarMonthViewRenderer.prototype, "dayViewFocusSlimmer", void 0);
