import React, { useContext } from 'react';
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { cx } from "../../../lib/theming/Emotion";
import { useResponsiveLayout } from "../../../components/ResponsiveLayout";
import { DateSelect } from "../../../internal/DateSelect";
import { styles } from "../MonthView.styles";
import { themeConfig } from "../config";
import * as CDS from "../CalendarDateShape";
import { CalendarDataTids } from "../Calendar";
import { CalendarContext } from "../CalendarContext";
export var getMinMonth = function getMinMonth(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 getMaxMonth(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 _cx, _cx2;
  var theme = useContext(ThemeContext);
  var _useContext = useContext(CalendarContext),
    minDate = _useContext.minDate,
    maxDate = _useContext.maxDate;
  var _useResponsiveLayout = useResponsiveLayout(),
    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, " + theme.calendarMonthTitleBorderBottomColor + ", transparent " + 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 /*#__PURE__*/(
    React.createElement("div", {
      "data-tid": CalendarDataTids.month,
      className: cx((_cx = {}, _cx[styles.month(theme)] = true, _cx[styles.monthMobile()] = isMobile, _cx)),
      style: {
        top: top
      },
      key: month + '-' + year
    }, /*#__PURE__*/

    React.createElement("div", {
      style: {
        top: headerTop
      },
      className: cx((_cx2 = {}, _cx2[styles.header()] = true, _cx2[styles.headerSticky(theme)] = isHeaderSticky, _cx2))
    }, /*#__PURE__*/

    React.createElement("div", {
      style: {
        borderBottomColor: borderBottomColor
      },
      className: styles.monthTitle(theme)
    }, /*#__PURE__*/
    React.createElement("div", {
      "data-tid": CalendarDataTids.headerMonth,
      className: styles.headerMonth(theme)
    }, /*#__PURE__*/
    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 && /*#__PURE__*/
    React.createElement("div", {
      "data-tid": CalendarDataTids.headerYear,
      className: styles.headerYear(theme),
      style: {
        top: yearTop
      }
    }, /*#__PURE__*/
    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)
  );
}