import { h } from '@stencil/core';
import { DatePickerDay } from './date-picker-day';
import { getViewOfMonth, inRange, isEqual } from './date-utils';
import { chunk, mapWithOffset } from './dialog-utils';
export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, dateFormatter, isDateDisabled, onDateSelect, onKeyboardNavigation, focusedDayRef, }) => {
  const today = new Date();
  const days = getViewOfMonth(focusedDate, firstDayOfWeek);
  return (h("div", { class: "telia-date-picker__table-wrapper" },
    h("table", { class: "telia-date-picker__table", "aria-labelledby": labelledById },
      h("thead", null,
        h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, dayName => (h("th", { class: "telia-date-picker__table-header", scope: "col" },
          h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
          h("span", { class: "telia-date-picker__vhidden" }, dayName)))))),
      h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "telia-date-picker__row" }, week.map(day => (h("td", { class: "telia-date-picker__cell" },
        h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, isSelected: isEqual(day, selectedDate), disabled: isDateDisabled(day), inRange: inRange(day, min, max), onDaySelect: onDateSelect, dateFormatter: dateFormatter, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef })))))))))));
};
