import styled, {createGlobalStyle} from 'styled-components';
import {
  actionColor, black, borderRadius, gray80, spacing, white,
} from '@propellerads/stylevariables';

import 'react-dates/lib/css/_datepicker.css';
import {DatePickerSelectorProps, SELECTOR_POSITION} from './types';

const DatePicker = styled.div`
  position: relative;
`;

const DatePickerSelector = styled.div`
    z-index: 2500;
    position: absolute;
    ${(props: DatePickerSelectorProps) => (props.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;
    padding-top: ${spacing * 2}px;
    padding-bottom: ${spacing * 4}px;
`;

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;
}

.CalendarDay__selected,
.CalendarDay__selected:hover {
  background: ${actionColor}!important;
  color: ${white}!important;
  border: 1px double ${actionColor}!important;
}

.CalendarDay__hovered_span:hover,
.CalendarDay__hovered_span {
  background: #cce6ff!important;
  color: #fff!important;
  border: 1px double #9cf!important;
}
`;

export {
  DatePicker,
  DatePickerSelector,
  CommonStyles,
};