import styled, {createGlobalStyle} from 'styled-components';
import {
  spacing,
  gray80,
  white,
  borderRadius,
  actionColor,
  black,
  smallDevices,
} from '@propellerads/stylevariables';
import 'react-dates/lib/css/_datepicker.css';

const StyledDatePicker = styled.div`
  display: inline-flex;
  position: relative;
  
  // Polish workaround by https://github.com/airbnb/react-dates/issues/1249
  .DayPicker__hidden {
    visibility: visible;
  }
`;

const SELECTOR_POSITION = {
  TOP: 'top',
  BOTTOM: 'bottom',
};

const DatePickerSelector = styled.div`
    z-index: 2500;
    position: absolute;
    ${({position}) => (position === SELECTOR_POSITION.TOP ? 'bottom:' : 'top:')} 40px;
    box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, 0.15);
    border: solid 1px ${gray80};
    background-color: ${white};
    border-radius: ${borderRadius}px;
    display: flex;
    flex-direction: ${(props) => (props.isMobile || props.isOnTopPresets ? 'column' : 'row')};
    padding-top: ${spacing * 2}px;
    padding-bottom: ${spacing * 4}px;
    ${(props) => props.align};
`;

const SELECTOR_ALIGN = {
  LEFT: 'left: 0',
  RIGHT: 'right: 0',
};

DatePickerSelector.defaultProps = {
  align: SELECTOR_ALIGN.LEFT,
};

const DatePickerCalendar = styled.div`
      display: flex;
      flex-direction: column;
      & .DayPicker__verticalScrollable {
          width: 350px;
          height: 400px;
      }
`;

const DatePickerFrame = styled.div`
    @media(max-width: ${smallDevices}px) {
        & div[role="button"] {
          display: none;
        }
    }
`;

const DatePickerFooter = styled.div`
      padding-right: ${spacing * 6}px;
      padding-bottom: ${spacing * 2}px;
      display: flex;
      justify-content: flex-end;
`;

const CommonStyles = createGlobalStyle`
// Will edit everything selected including everything between a range of dates
.CalendarDay__selected_span {
  background: #cce6ff!important;
  color: ${black}!important;
  border: 1px double #9cf!important;
}

.CalendarDay__selected_span:hover {
  background: #9cf!important;
  border: 1px double #9cf!important;
  color: ${black}!important;
}

// Will edit selected date or the endpoints of a range of dates
.CalendarDay__selected,
.CalendarDay__selected:hover {
  background: ${actionColor}!important;
  color: ${white}!important;
  border: 1px double ${actionColor}!important;
}

// Will edit when the second date (end date) in a range of dates
// is not yet selected. Edits the dates between your mouse and said date
.CalendarDay__hovered_span:hover,
.CalendarDay__hovered_span {
  background: #cce6ff!important;
  color: #fff!important;
  border: 1px double #9cf!important;
}
`;

export {
  SELECTOR_ALIGN,
  SELECTOR_POSITION,
  StyledDatePicker,
  DatePickerSelector,
  DatePickerCalendar,
  DatePickerFooter,
  DatePickerFrame,
  CommonStyles,
};