import React, { useCallback, useEffect, useRef } from 'react';
import styled from 'styled-components';
import { format, isToday } from 'date-fns';
import { Box, Typography } from '../../../../..';
import { DOUBLE_CALENDAR_GUTTER } from '../../constants';
var StyledCalendarDay = styled(Box).withConfig({
  displayName: "CalendarDay__StyledCalendarDay",
  componentId: "sc-2ihmvg-0"
})(["background:", ";min-width:", "px;min-height:", "px;margin:", "px 0;", " justify-content:center;align-items:center;display:flex;cursor:pointer;box-sizing:border-box;flex:1;", ""], function (_ref) {
  var theme = _ref.theme;
  return theme.colorTokens.neutral.background_default;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.spacing.unit(10) + 2;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.spacing.unit(10) + 2;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.spacing.unit(0.5);
}, function (_ref5) {
  var $withGutter = _ref5.$withGutter;
  return $withGutter ? "margin-right: ".concat(DOUBLE_CALENDAR_GUTTER, "px;") : '';
}, function (_ref6) {
  var $disabled = _ref6.$disabled,
    $selected = _ref6.$selected,
    $isWithinRange = _ref6.$isWithinRange,
    $isToday = _ref6.$isToday,
    $isFirstDay = _ref6.$isFirstDay,
    $isLastDay = _ref6.$isLastDay,
    $fullscreenMode = _ref6.$fullscreenMode,
    theme = _ref6.theme;
  return "\n  ".concat($disabled ? "cursor: not-allowed;\n        background: ".concat(theme.colorTokens.neutral.background_default, ";\n\n        &:focus {\n          border: 1px solid ").concat(theme.colorTokens.neutral.border_hover, ";\n        }") : "\n      &:focus {\n        border: 1px solid ".concat(theme.colorTokens.action.background_default, ";\n      }\n\n      &:hover {\n        border: 1px solid ").concat(theme.colorTokens.action.background_default, ";\n      }"), "\n  ").concat($isWithinRange ? "background: ".concat(theme.colorTokens.neutral.background_weak, ";") : '', "\n  ").concat($fullscreenMode ? "width: calc((100vw - ".concat(theme.spacing.unit(6), "px) / 7);\n\t\t\theight: calc((100vw - ").concat(theme.spacing.unit(6), "px) / 7);\n\t\t\t") : '', "\n  ").concat($isWithinRange && $isFirstDay ? "background: linear-gradient(to right, ".concat(theme.colorTokens.neutral.background_weak, ", ").concat(theme.colorTokens.neutral.background_weak, ");") : '', "\n  ").concat($isWithinRange && $isLastDay ? "background: linear-gradient(to left, ".concat(theme.colorTokens.neutral.background_weak, ", ").concat(theme.colorTokens.neutral.background_weak, ");") : '', "\n  ").concat($isToday ? "border: 1px solid ".concat(theme.colorTokens.neutral.border_hover, ";") : '', "\n  ").concat($selected ? "background: ".concat(theme.colorTokens.action.background_default, ";") : '', "\n");
});
var CalendarDay = function CalendarDay(_ref7) {
  var onFocus = _ref7.onFocus,
    _ref7$className = _ref7.className,
    className = _ref7$className === void 0 ? '' : _ref7$className,
    date = _ref7.date,
    focused = _ref7.focused,
    _ref7$disabled = _ref7.disabled,
    disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
    locale = _ref7.locale,
    onClick = _ref7.onClick,
    onKeyDown = _ref7.onKeyDown,
    _ref7$sameMonth = _ref7.sameMonth,
    sameMonth = _ref7$sameMonth === void 0 ? true : _ref7$sameMonth,
    selected = _ref7.selected,
    _ref7$isWithinRange = _ref7.isWithinRange,
    isWithinRange = _ref7$isWithinRange === void 0 ? false : _ref7$isWithinRange,
    _ref7$isFirstDay = _ref7.isFirstDay,
    isFirstDay = _ref7$isFirstDay === void 0 ? false : _ref7$isFirstDay,
    _ref7$isLastDay = _ref7.isLastDay,
    isLastDay = _ref7$isLastDay === void 0 ? false : _ref7$isLastDay,
    withGutter = _ref7.withGutter,
    _ref7$fullscreenMode = _ref7.fullscreenMode,
    fullscreenMode = _ref7$fullscreenMode === void 0 ? false : _ref7$fullscreenMode;
  var ref = useRef(null);
  useEffect(function () {
    if (focused) {
      var _ref$current;
      (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
    }
  }, [focused]);
  var textColor = function () {
    if (!sameMonth && !selected) return 'otherMonthDateText';
    if (disabled) return 'disabledText';
    if (selected) return 'buttonText';
    if (!selected) return 'text';
    return '';
  }();
  var handleClick = useCallback(function () {
    if (disabled) return;
    if (onClick) onClick(date);
  }, [date, disabled, onClick]);
  var ariaLabel = format(date, 'EEEE dd MMMM, yyyy', {
    locale: locale
  });
  return React.createElement(StyledCalendarDay, {
    ref: ref,
    className: className,
    $disabled: disabled,
    $selected: selected,
    $isWithinRange: isWithinRange,
    $isToday: isToday(date),
    $isSameMonth: sameMonth,
    $isFirstDay: isFirstDay,
    $isLastDay: isLastDay,
    "data-selected": selected,
    "data-disabled": disabled,
    onClick: handleClick,
    onKeyDown: onKeyDown,
    onFocus: onFocus,
    "aria-label": ariaLabel,
    tabIndex: disabled ? -1 : 0,
    $withGutter: withGutter,
    $fullscreenMode: fullscreenMode
  }, React.createElement(Typography, {
    type: "tertiary",
    "aria-hidden": true,
    color: function color(t) {
      return t.color[textColor || 'text'];
    }
  }, format(date, 'd')));
};
export default CalendarDay;