import styled from 'styled-components'
import defaultReactDatesCss from './reactDatesCss'

// calendarDayDefaultHeight and calendarDayDefaultWidth
// refer to circle size when selected, focused, or hovered and is passed  with getResponsiveCircleSize in DatePicker

const CalendarContainer = styled.div(
  ({
    daySize,
    remainingTokens,
    calendarMonthFontTokens,
    calendarDayDefaultHeight,
    calendarDayDefaultWidth,
    calendarWeekFontTokens,
    defaultFontTokens
  }) => `
  ${defaultReactDatesCss}
  > div {
    z-index: 1000;
  }
  .SingleDatePicker,
  .SingleDatePickerInput {
    display: block;
  }
  .SingleDatePicker_picker {
    background-color: ${remainingTokens.calendarBackgroundColor};
    box-shadow: none;
    border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
    border-radius: ${remainingTokens.singleDatePickerRadius}px;
    padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${
    remainingTokens.singleDatePickerLeftRight
  }px;
    z-index: 1000;
  }
  .DateInput {
    width: 100%;
  }
  .SingleDatePickerInput__withBorder {
    border: 0 !important;
  }
  .DateInput_fang {
    transform: translateY(2px);
    z-index: 4;
    left: ${(daySize * 8.5 - 20) / 2}px;
  }
  .DateInput_fangShape {
    fill: ${remainingTokens.calendarBackgroundColor}
  }
  .DateInput_fangStroke {
    stroke: ${remainingTokens.dateInputStrokeColor};
  }
  .CalendarMonth_caption {
    color: ${remainingTokens.calendarMonthCaptionColor};
    font-family: ${calendarMonthFontTokens.fontFamily};
    font-size: ${remainingTokens.calendarMonthCaptionFontSize}px;
    font-weight: ${calendarMonthFontTokens.fontWeight};
    line-height: ${remainingTokens.calendarMonthCaptionLineHeight};
    padding-bottom: ${remainingTokens.calendarMonthCaptionPaddingBottom}px;
  }
  .DayPicker{
    background-color: ${remainingTokens.calendarBackgroundColor};
  }
  .DayPicker__withBorder {
    box-shadow: none;
  }
  .DayPickerNavigation {  
    display: flex;
    justify-content: space-between;
    align-self: center;
    top: 23px;
    padding: 0px ${remainingTokens.dayPickerNavigationButtonPadding}px;
  }
  .DayPickerNavigation_button__default:focus,
  .DayPickerNavigation_button:hover,
  .DayPickerNavigation_svg__horizontal,
  .DayPicker_weekHeader {
    color: ${remainingTokens.dayPickerWeekHeaderColor};
    font-family: ${calendarWeekFontTokens.fontFamily};
    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
    line-height: ${remainingTokens.dayPickerWeekHeaderLineHeight};
    & li {
      font-size: ${remainingTokens.dayPickerWeekHeaderSmall}px;
      max-width: ${daySize}px !important;
    }
  }
  .CalendarMonthGrid {
    background-color: ${remainingTokens.calendarBackgroundColor};
  }
  .CalendarMonth {
    background-color: ${remainingTokens.calendarBackgroundColor};
  }
  .CalendarDay__default {
    padding: 0px;
    position: relative;
    background: ${remainingTokens.calendarDayDefaultBackgroundColor};
    background-clip: padding-box;
    border: ${remainingTokens.calendarDayDefaultBorder}px solid ${
    remainingTokens.calendarDayDefaultBorderColor
  };
    vertical-align: middle;
    font-family: ${defaultFontTokens.fontFamily};
    font-weight: ${defaultFontTokens.fontWeight}
    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
    font-size: ${remainingTokens.calendarDayDefaultFontSize}px;
    line-height: ${daySize - 3}px !important;
    color: ${remainingTokens.calendarDayDefaultColor};
    text-decoration: none;
    transition: all 0.3s;
    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: ${calendarDayDefaultHeight}px;
      width: ${calendarDayDefaultWidth}px;
      border-radius: 50%;
      background: transparent;
      transition: all 0.3s;
      z-index: -1;
    }
  }
  .CalendarDay__default:hover  {
    background: ${remainingTokens.calendarDaySelectedHoverBackground};
    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
    color: ${remainingTokens.calendarDaySelectedHoverColor};
    text-decoration: none;
    z-index: 0;
    &:before {
      border: 1px solid ${remainingTokens.calendarDaySelectedHoverBeforeBorderColor};
      background: ${remainingTokens.calendarDaySelectedHoverBeforeBackground};
    }
  }
  .CalendarDay__default:focus{
    background: ${remainingTokens.calendarDaySelectedHoverBackground};
    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
    color: ${remainingTokens.calendarDaySelectedHoverColor};
    text-decoration: none;
    z-index: 0;
    &:before {
      border: 1px solid ${remainingTokens.calendarDaySelectedHoverBeforeBorderColor};
      background: ${remainingTokens.calendarDaySelectedFocusBeforeBackground};
    }
  }
  .CalendarDay__selected,
  .CalendarDay__selected:active,
  .CalendarDay__default.CalendarDay__selected,
  .CalendarDay__default.CalendarDay__selected:active{
    background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
    color: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverColor};
    text-decoration: none;
    z-index: 0;
    &:before {
      background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
  }
}


.CalendarDay__selected:hover
  .CalendarDay__default.CalendarDay__selected:hover{
  &:before {
    background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
  }
}

.CalendarDay
.CalendarDay__default
.CalendarDay__selected
.CalendarDay__blocked_out_of_range{
  background: ${remainingTokens.calendarDaySelectedDisabledBackground};
  color: ${remainingTokens.calendarDaySelectedDisabledColor};
  text-decoration: none;
  z-index: 0;
  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: ${calendarDayDefaultHeight}px;
    border: 1px solid ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
    width: ${calendarDayDefaultWidth}px;
    border-radius: 50%;
    background: ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
    transition: all 0.3s;
    z-index: -1;
  }
}

  .CalendarDay__blocked_out_of_range,
  .CalendarDay__blocked_out_of_range:active,
  .CalendarDay__blocked_out_of_range:hover,
  .CalendarDay__blocked_calendar,
  .CalendarDay__blocked_calendar:active,
  .CalendarDay__blocked_calendar:hover {
    font-weight: 300;
    background: ${remainingTokens.calendarDayBlockedCalendarHoverBackground};
    background-clip: padding-box;
    color: ${remainingTokens.calendarDayBlockedCalendarHoverColor};
    text-decoration: none;
    &:before {
      content: none;
    }
  }
`
)

export default CalendarContainer