"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.MonthView = MonthView;exports.getMinMonth = exports.getMaxMonth = void 0;var _react = _interopRequireWildcard(require("react"));

var _ThemeContext = require("../../lib/theming/ThemeContext");
var _Emotion = require("../../lib/theming/Emotion");
var _ResponsiveLayout = require("../../components/ResponsiveLayout");

var _DateSelect = require("../../internal/DateSelect");

var _MonthView = require("./MonthView.styles");
var _config = require("./config");
var CDS = _interopRequireWildcard(require("./CalendarDateShape"));
var _Calendar = require("./Calendar");
var _CalendarContext = require("./CalendarContext");

var getMinMonth = exports.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;
};

var getMaxMonth = exports.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;
};
















function MonthView(props) {var _cx, _cx2;
  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
  var _useContext = (0, _react.useContext)(_CalendarContext.CalendarContext),minDate = _useContext.minDate,maxDate = _useContext.maxDate;
  var _useResponsiveLayout = (0, _ResponsiveLayout.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 - (0, _config.themeConfig)(theme).MONTH_TITLE_HEIGHT) : 0;
  var alpha = isHeaderSticky ? (height + top - (0, _config.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 - (0, _config.themeConfig)(theme).MONTH_TITLE_HEIGHT;
  var yearSelectDisabled = top > 52 || isLastInYear && top < -height + (0, _config.themeConfig)(theme).MONTH_TITLE_HEIGHT;

  return /*#__PURE__*/(
    _react.default.createElement("div", {
      "data-tid": _Calendar.CalendarDataTids.month,
      className: (0, _Emotion.cx)((_cx = {}, _cx[_MonthView.styles.month(theme)] = true, _cx[_MonthView.styles.monthMobile()] = isMobile, _cx)),
      style: { top: top },
      key: month + '-' + year }, /*#__PURE__*/

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

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

}