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

export const CalendarContainer = styled.div(
  ({
    $daySize,
    $remainingTokens,
    $calendarMonthFontTokens,
    $calendarDayDefaultHeight,
    $calendarDayDefaultWidth,
    $calendarWeekFontTokens,
    $defaultFontTokens,
    $isInline = false
  }) => `
  ${defaultReactDatesCss}
  > div {
    z-index: ${$isInline ? 'auto' : 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: ${$isInline ? 'auto' : 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;
    }
  }
`
)