import { h } from '@stencil/core';
import { isEqual, isEqualMonth } from './date-utils';
export const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, disabled, inRange, isSelected, dateFormatter, }) => {
  const isToday = isEqual(day, today);
  const isMonth = isEqualMonth(day, focusedDay);
  const isFocused = isEqual(day, focusedDay);
  const isOutsideRange = !inRange;
  const isDisabled = disabled || isOutsideRange;
  const handleClick = e => {
    onDaySelect(e, day);
  };
  return (h("button", { class: {
      'telia-date-picker__day': true,
      'is-today': isToday,
      'is-month': isMonth,
      'is-disabled': isDisabled,
    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isDisabled ? 'true' : undefined, 
    // disabled days have to be focusable for a11y purposes
    disabled: isOutsideRange, type: "button", "aria-pressed": isSelected ? 'true' : 'false', ref: el => {
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      if (isFocused && el && focusedDayRef) {
        focusedDayRef(el);
      }
    } },
    h("span", { "aria-hidden": "true" }, day.getDate()),
    h("span", { class: "telia-date-picker__vhidden" }, dateFormatter.format(day))));
};
