/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-b46ab85
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getWeeksInMonth } from '@internationalized/date';
import { useCalendarGrid, useLocale } from 'react-aria';
import { tasty } from '../../../tasty/index.js';
import { CalendarCell } from './CalendarCell.js';
const TableElement = tasty({
    as: 'table',
    styles: {
        borderCollapse: 'collapse',
        HeadRow: {
            color: '#dark-04',
        },
    },
});
export function CalendarGrid({ state, ...props }) {
    let { locale } = useLocale();
    let { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);
    // Get the number of weeks in the month, so we can render the proper number of rows.
    let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
    return (_jsxs(TableElement, { ...gridProps, children: [_jsx("thead", { "data-element": "Head", ...headerProps, children: _jsx("tr", { "data-element": "HeadRow", children: weekDays.map((day, index) => (_jsx("th", { children: day }, index))) }) }), _jsx("tbody", { "data-element": "Body", children: [...new Array(weeksInMonth).keys()].map((weekIndex) => (_jsx("tr", { "data-element": "Row", children: state
                        .getDatesInWeek(weekIndex)
                        .map((date, i) => date ? (_jsx(CalendarCell, { state: state, date: date, selectedRange: props.selectedRange }, i)) : (_jsx("td", {}, i))) }, weekIndex))) })] }));
}

        