// @flow
import type { ThemeProps } from '../../types';
import { getPaletteColor } from '../../mixins/branding';
import {
  getFontFamily,
  getFontSize,
  getFontWeight,
} from '../../mixins/typography';
import {
  FOCUS_VISIBLE_SELECTOR,
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
  getBaseFocusState,
} from '../../mixins/focus';
import { fadeColor } from '../../utils/color';

export const getDateRangePickerStyles = ({ theme }: ThemeProps) => `
/* DayPicker styles */

.DayPicker {
  display: inline-block;
  outline: none;
}

.DayPicker-wrapper {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding-bottom: 1rem;
  flex-direction: row;
  ${getBaseFocusState({})}
  ${FOCUS_VISIBLE_SELECTOR} {
    box-shadow: ${focusedBoxShadow({ theme })}, ${focusedBorderShadow(
  {},
)} ${focusedBorderColor({ theme })};
    border-radius: 10px;
  }
}

.DayPicker-Months {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.DayPicker-Month {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0 1rem;
  margin-top: 1rem;
}

.DayPicker-NavButton {
  position: absolute;
  cursor: pointer;
  top: 1rem;
  right: 1.5rem;
  margin-top: 2px;
  color: ${getPaletteColor('greyscale-dark')({ theme }) || ''};
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  ${getBaseFocusState({})}
  ${FOCUS_VISIBLE_SELECTOR} {
    box-shadow: ${focusedBoxShadow({ theme })}, ${focusedBorderShadow(
  {},
)} ${focusedBorderColor({ theme })};
  }
}

.DayPicker-NavButton:hover {
  opacity: 0.8;
}

.DayPicker-NavButton--prev {
  margin-right: 1.5rem;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC');
}

.DayPicker-NavButton--next {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==');
}

.DayPicker-NavButton--interactionDisabled {
  display: none;
}

.DayPicker-Caption {
  padding: 0 0.5rem;
  display: table-caption;
  text-align: left;
  margin-bottom: 0.5rem;
}

.DayPicker-Caption > div {
  font-size: ${getFontSize({ theme, fontSize: 'f2' })};
  font-weight: ${getFontWeight({})};
  color: ${getPaletteColor('greyscale-black')({ theme }) || ''};
}

.DayPicker-Weekdays {
  margin-top: 1rem;
  display: table-header-group;
}

.DayPicker-WeekdaysRow {
  display: table-row;
}

.DayPicker-Weekday {
  display: table-cell;
  font-size: ${getFontSize({ theme, fontSize: 'f0' })};
  text-align: center;
  color: ${getPaletteColor('greyscale-dark')({ theme }) || ''};
}

.DayPicker-Weekday abbr[title] {
  border-bottom: none;
  text-decoration: none;
}

.DayPicker-Body {
  display: table-row-group;
}

.DayPicker-Week {
  display: table-row;
}

.DayPicker-Day {
  outline: none;
  ${getBaseFocusState({})}
  ${FOCUS_VISIBLE_SELECTOR} {
    box-shadow: ${focusedBoxShadow({ theme })}, ${focusedBorderShadow(
  {},
)} ${focusedBorderColor({ theme })};
  }
  display: table-cell;
  height: 37px;
  width: 37px;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  border-radius: 50%;
  color: ${getPaletteColor('greyscale-black')({ theme }) || ''};
}

.DayPicker-WeekNumber {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  min-width: 1rem;
  font-size: ${getFontSize({ theme, fontSize: 'f0' })};
  cursor: pointer;
  color: ${getPaletteColor('greyscale-dark')({ theme }) || ''};
  border-right: 1px solid ${
    getPaletteColor('greyscale-light')({ theme }) || ''
  };
}

.DayPicker--interactionDisabled .DayPicker-Day {
  cursor: default;
}

.DayPicker-Footer {
  padding-top: 0.5rem;
}

.DayPicker-TodayButton {
  border: none;
  background-image: none;
  background-color: transparent;
  box-shadow: none;
  cursor: pointer;
  color: ${getPaletteColor('brand-secondary-base')({ theme }) || ''};
  font-size: ${getFontSize({ theme, fontSize: 'f0' })};
}

/* Default modifiers */

.DayPicker-Day--today {
  color: ${getPaletteColor('brand-secondary-base')({ theme }) || ''};
  font-family: ${getFontFamily({ theme })};
  font-weight: ${getFontWeight({ bold: true })};
}

.DayPicker-Day--outside {
  cursor: default;
  color: ${getPaletteColor('greyscale-dark')({ theme }) || ''};
}

.DayPicker-Day--disabled {
  color: ${getPaletteColor('greyscale-medium')({ theme }) || ''};
  cursor: default;
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
  position: relative;
  color: ${getPaletteColor('white')({ theme }) || ''};
  background-color: ${getPaletteColor('brand-secondary-base')({ theme }) || ''};
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
  background-color: ${getPaletteColor('brand-secondary-base')({ theme }) || ''};
}

.DayPicker:not(.DayPicker--interactionDisabled)
  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
  background-color: ${getPaletteColor('greyscale-light')({ theme }) || ''};
}

/* DayPickerInput */

.DayPickerInput {
  display: inline-block;
}

/* Custom for Patchwork */
.DayPickerInput > input {
  width: 100%; /* it should take the full width of its Box container */
  height: 40px;
  border-radius: 6px;
  background-color: ${getPaletteColor('white')({ theme }) || ''};
  border: solid 1px ${getPaletteColor('greyscale-light')({ theme }) || ''};

  padding: 14px 30px 14px 20px;
  color: ${getPaletteColor('greyscale-black')({ theme }) || ''};
  font-size: ${getFontSize({ theme, fontSize: 'f1' })};
  line-height: 1;
  font-family: ${getFontFamily({ theme })};
}
/* End custom for Patchwork */

.DayPickerInput-OverlayWrapper {
  position: relative;
}

.DayPickerInput-Overlay {
  left: 0;
  z-index: 2;
  position: absolute;
  background: ${getPaletteColor('white')({ theme }) || ''};
  box-shadow: 0 5px 15px ${fadeColor(
    getPaletteColor('greyscale-black')({ theme }),
    0.95,
  )};
  border: solid 1px ${
    getPaletteColor('greyscale-light')({ theme }) || ''
  }; /* custom */
  border-radius: 3px;
}

.Range .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
  background-color: ${getPaletteColor('brand-secondary-bg')({
    theme,
  })} !important;
  color: ${getPaletteColor('brand-secondary-fg')({ theme })};
}
.Range .DayPicker-Day {
  border-radius: 0 !important;
}
`;
