import React, { useContext } from 'react';
import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
import { useResponsiveLayout } from '../../components/ResponsiveLayout/index.js';
import { DateSelect } from '../../internal/DateSelect/index.js';
import { getStyles } from './MonthView.styles.js';
import { themeConfig } from './config.js';
import * as CDS from './CalendarDateShape.js';
import { CalendarDataTids } from './Calendar.js';
import { CalendarContext } from './CalendarContext.js';
export var getMinMonth = function (year, minDate) {
    var min = 0;
    for (var i = 0; i < 12; ++i) {
        if (minDate && CDS.isGreaterOrEqual({ date: 31, month: i, year: year }, minDate)) {
            min = i;
            break;
        }
    }
    return min;
};
export var getMaxMonth = function (year, maxDate) {
    var max = 11;
    for (var i = 11; i >= 0; --i) {
        if (maxDate && CDS.isLessOrEqual({ date: 1, month: i, year: year }, maxDate)) {
            max = i;
            break;
        }
    }
    return max;
};
export function MonthView(props) {
    var _a, _b;
    var theme = useContext(ThemeContext);
    var cx = useEmotion().cx;
    var styles = useStyles(getStyles);
    var _c = useContext(CalendarContext), minDate = _c.minDate, maxDate = _c.maxDate;
    var isMobile = useResponsiveLayout().isMobile;
    var children = props.children, height = props.height, isFirstInYear = props.isFirstInYear, isLastInYear = props.isLastInYear, month = props.month, top = props.top, year = props.year, onMonthSelect = props.onMonthSelect, onYearSelect = props.onYearSelect, monthSelectRef = props.monthSelectRef, yearSelectRef = props.yearSelectRef;
    var isTopNegative = top <= 0;
    var isHeaderSticky = isTopNegative && height >= -top;
    var headerTop = isHeaderSticky ? Math.min(-top, height - themeConfig(theme).MONTH_TITLE_HEIGHT) : 0;
    var alpha = isHeaderSticky ? (height + top - themeConfig(theme).MONTH_TITLE_HEIGHT) / 10 : 1;
    var borderBottomColor = "color-mix(in srgb, ".concat(theme.calendarMonthTitleBorderBottomColor, ", transparent ").concat(Math.max(alpha, 0), "%)");
    var isYearVisible = isFirstInYear || isHeaderSticky;
    var yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;
    var monthSelectDisabled = top > 52 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;
    var yearSelectDisabled = top > 52 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT);
    return (React.createElement("div", { "data-tid": CalendarDataTids.month, className: cx((_a = {}, _a[styles.month(theme)] = true, _a[styles.monthMobile()] = isMobile, _a)), style: { top: top }, key: month + '-' + year },
        React.createElement("div", { style: { top: headerTop }, className: cx((_b = {},
                _b[styles.header()] = true,
                _b[styles.headerSticky(theme)] = isHeaderSticky,
                _b)) },
            React.createElement("div", { style: { borderBottomColor: borderBottomColor }, className: styles.monthTitle(theme) },
                React.createElement("div", { "data-tid": CalendarDataTids.headerMonth, className: styles.headerMonth(theme) },
                    React.createElement(DateSelect, { disabled: monthSelectDisabled, width: isMobile ? '6em' : 85, type: "month", value: month, onValueChange: onMonthSelect, ref: !monthSelectDisabled ? monthSelectRef : undefined, minValue: getMinMonth(year, minDate), maxValue: getMaxMonth(year, maxDate) })),
                isYearVisible && (React.createElement("div", { "data-tid": CalendarDataTids.headerYear, className: styles.headerYear(theme), style: { top: yearTop } },
                    React.createElement(DateSelect, { disabled: yearSelectDisabled, width: isMobile ? '3.5em' : 50, type: "year", value: year, minValue: minDate ? minDate.year : undefined, maxValue: maxDate ? maxDate.year : undefined, onValueChange: onYearSelect, ref: !yearSelectDisabled ? yearSelectRef : undefined }))))),
        children));
}
//# sourceMappingURL=MonthView.js.map