/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { h } from "../../../utils/renderer";
import { isEqual } from "../../../utils/date-utils";
export const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, disabled, isSelected, }) => {
    const isToday = isEqual(day, today);
    const isFocused = isEqual(day, focusedDay);
    const isDisabled = day.getMonth() !== focusedDay.getMonth() || disabled;
    const isOutsideRange = !inRange;
    function handleClick(e) {
        onDaySelect(e, day);
    }
    return (h("button", { class: {
            'duet-date__day': true,
            'is-outside': isOutsideRange,
            'is-disabled': isDisabled,
            'is-today': isToday,
        }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange, type: "button", "aria-pressed": isSelected ? 'true' : 'false', ref: (el) => {
            if (isFocused && el && focusedDayRef) {
                focusedDayRef(el);
            }
        } }, h("span", { "aria-hidden": "true" }, day.getDate()), h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' }))));
};
