import _isNil from "ramda/src/isNil";
import React, { useRef } from 'react';
import styled from 'styled-components';
import { isSameDay, isSameMonth, isWithinInterval } from 'date-fns';
import { Box, Flexbox, Typography } from '../../../..';
import { getCalendar, getLocale } from '../../shared/dateUtils';
import CalendarDay from '../../shared/components/CalendarDay';
import { useFocusedDate } from '../../shared/hooks';
export var StyledBox = styled(Box).withConfig({
  displayName: "Calendar__StyledBox",
  componentId: "sc-1c6ogvy-0"
})(["border:1px solid transparent;min-width:", "px;text-align:center;margin-bottom:", "px;margin-top:", "px;"], function (_ref) {
  var theme = _ref.theme;
  return theme.spacing.unit(10);
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.spacing.unit(2);
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.spacing.unit(3);
});
var Calendar = function Calendar(_ref4) {
  var _calendar$weekDays, _calendar$dates;
  var disableDate = _ref4.disableDate,
    enableDate = _ref4.enableDate,
    locale = _ref4.locale,
    viewedDate = _ref4.viewedDate,
    onMonthChange = _ref4.onMonthChange,
    _onClick = _ref4.onClick,
    selectedDate = _ref4.selectedDate,
    selectedEndDate = _ref4.selectedEndDate,
    fullscreenMode = _ref4.fullscreenMode;
  var calendarRef = useRef(null);
  var localeObj = getLocale(locale);
  var calendar = getCalendar(viewedDate || new Date(), {
    locale: localeObj
  });
  var dateIsDisabled = function dateIsDisabled(dateToCheck) {
    var isEnabled = dateToCheck && enableDate && enableDate(dateToCheck);
    var isDisabled = dateToCheck && disableDate && disableDate(dateToCheck);
    if (_isNil(isEnabled) && _isNil(isDisabled)) return false;
    if (_isNil(isEnabled)) return isDisabled;
    if (_isNil(isDisabled)) return !isEnabled;
    return false;
  };
  var _useFocusedDate = useFocusedDate({
      calendarRef: calendarRef,
      viewedDate: viewedDate,
      calendar: calendar,
      onMonthChange: onMonthChange,
      dateIsDisabled: dateIsDisabled,
      onSelectDate: _onClick
    }),
    focusedDate = _useFocusedDate.focusedDate,
    handleKeyPress = _useFocusedDate.handleKeyPress,
    handleFocus = _useFocusedDate.handleFocus;
  return React.createElement(Flexbox, {
    ref: calendarRef,
    container: true,
    direction: "column"
  }, React.createElement(Flexbox, {
    container: true,
    justifyContent: "space-between",
    "aria-hidden": true
  }, (_calendar$weekDays = calendar.weekDays) === null || _calendar$weekDays === void 0 ? void 0 : _calendar$weekDays.map(function (n) {
    return React.createElement(Flexbox, {
      item: true,
      justifyContent: "center",
      alignItems: "center",
      key: n
    }, React.createElement(StyledBox, null, React.createElement(Typography, {
      type: "tertiary"
    }, n)));
  })), (_calendar$dates = calendar.dates) === null || _calendar$dates === void 0 ? void 0 : _calendar$dates.map(function (week, weekIndex) {
    return React.createElement(Flexbox, {
      container: true,
      justifyContent: "space-between",
      key: week.toString()
    }, week === null || week === void 0 ? void 0 : week.map(function (day, dayIndex) {
      return React.createElement(CalendarDay, {
        onFocus: function onFocus() {
          handleFocus(day);
        },
        focused: !!focusedDate && isSameDay(day, focusedDate),
        key: day.toString(),
        date: day,
        disabled: !!dateIsDisabled(day),
        onClick: function onClick() {
          if (!dateIsDisabled(day)) _onClick(day);
        },
        onKeyDown: handleKeyPress,
        selected: selectedDate && isSameDay(selectedDate, day) || selectedEndDate && isSameDay(selectedEndDate, day),
        sameMonth: isSameMonth(viewedDate, day),
        locale: localeObj,
        isWithinRange: function () {
          if (selectedEndDate && selectedDate < selectedEndDate) return isWithinInterval(day, {
            start: selectedDate,
            end: selectedEndDate
          });
          if (selectedEndDate && selectedDate > selectedEndDate) return isWithinInterval(day, {
            start: selectedEndDate,
            end: selectedDate
          });
          return false;
        }(),
        isFirstDay: weekIndex === 0 && dayIndex === 0,
        isLastDay: weekIndex === calendar.dates.length - 1 && dayIndex === week.length - 1,
        fullscreenMode: fullscreenMode
      });
    }));
  }));
};
export default Calendar;