import React, { useState } from 'react'
import { DateRangePicker, DateRangePickerProps } from 'react-date-range'

import useTheme from '../use-theme'
import { styles } from './styles'
import useScale, { withScale } from '../use-scale'

interface Props {
  className?: string
  disabledDates?: Array<Date>
  minDate?: Date
  maxDate?: Date
  initialStartDate?: Date
  initialEndDate?: Date
  color?: string
  onChange: (range: any) => void
}

const defaultProps = {
  initialStartDate: new Date(),
  initialEndDate: new Date()
}

export type DateRangeProps = Props & typeof defaultProps & DateRangePickerProps

const background =
  "\"data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>\""

const DateRange: React.FC<React.PropsWithChildren<DateRangeProps>> = ({
  disabledDates,
  minDate,
  maxDate,
  className,
  initialStartDate,
  initialEndDate,
  color,
  onChange,
  ...props
}) => {
  const theme = useTheme()
  const { SCALES } = useScale()
  const [selectionRange, setSelectionRange] = useState({
    startDate: initialStartDate,
    endDate: initialEndDate,
    key: 'selection',
    color: color || theme.palette.success
  })

  const onChangeHandler = (range: any) => {
    setSelectionRange(range.selection)
    onChange(range)
  }

  return (
    <>
      <DateRangePicker
        ranges={[selectionRange]}
        onChange={onChangeHandler}
        className={className}
        disabledDates={disabledDates}
        minDate={minDate}
        maxDate={maxDate}
        {...props}
      />
      <style jsx>{styles}</style>
      <style jsx global>{`
        .rdrMonthAndYearPickers > span.rdrMonthPicker,
        .rdrMonthAndYearPickers > span.rdrYearPicker {
          flex-grow: 1;
          width: 50%;
        }
        .rdrMonthAndYearPickers select {
          width: 100%;
          appearance: none;
          border: 0;
          background: transparent;
          padding: ${theme.layout.gapQuarter})
            ${theme.layout.gapQuarter} ${theme.layout.gapQuarter};
          border-radius: ${theme.layout.radius};
          outline: 0;
          color: ${theme.palette.accents_12};
          background: url(${background}) no-repeat;
          background-position: right 8px center;
          cursor: pointer;
          text-align: center;
        }

        .rdrCalendarWrapper {
          background: ${theme.palette.background};
          color: ${theme.palette.foreground};
          font-size: ${theme.font.fontSizes.mini};
        }

        .rdrDateDisplayWrapper {
          background-color: ${theme.palette.accents_1};
        }

        .rdrDateDisplay {
          margin: 0.833em;
        }

        .rdrDateDisplayItem {
          border-radius: ${theme.layout.radius};
          background-color: ${theme.palette.background};
          box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
          border: 1px solid transparent;
        }

        .rdrDateDisplayItem input {
          height: ${SCALES.height(1.5)};
          line-height: ${SCALES.height(1.5)};
          border: 0;
          background: transparent;
          width: 100%;
          color: ${theme.palette.accents_11};
          cursor: pointer;
        }

        .rdrDateDisplayItemActive {
          border-color: currentColor;
        }

        .rdrDateDisplayItemActive input {
          color: ${theme.palette.foreground};
        }

        .rdrMonthAndYearWrapper {
          align-items: center;
          height: calc(3 * ${theme.layout.gap});
          padding-top: ${theme.layout.gapHalf};
        }

        .rdrMonthAndYearPickers {
          font-weight: ${theme.font.fontWeights.medium};
        }

        .rdrMonthAndYearPickers select:hover {
          background-color: rgba(0, 0, 0, 0.07);
        }

        .rdrMonthPicker,
        .rdrYearPicker {
          margin: 0 ${theme.layout.gapQuarter};
        }

        .rdrNextPrevButton {
          display: block;
          width: 24px;
          height: 24px;
          margin: 0 0.833em;
          padding: 0;
          border: 0;
          border-radius: ${theme.layout.gapQuarter};
          background: ${theme.palette.accents_1};
        }

        .rdrNextPrevButton:hover {
          background: ${theme.palette.accents_2};
        }

        .rdrNextPrevButton i {
          display: block;
          width: 0;
          height: 0;
          padding: 0;
          text-align: center;
          border-style: solid;
          margin: auto;
          transform: translate(-3px, 0px);
        }

        .rdrPprevButton i {
          border-width: 4px 6px 4px 4px;
          border-color: transparent rgb(52, 73, 94) transparent transparent;
          transform: translate(-3px, 0px);
        }

        .rdrNextButton i {
          margin: 0 0 0 7px;
          border-width: 4px 4px 4px 6px;
          border-color: transparent transparent transparent rgb(52, 73, 94);
          transform: translate(3px, 0px);
        }

        .rdrWeekDays {
          padding: 0 0.833em;
        }

        .rdrMonth {
          padding: 0 0.833em 1.666em 0.833em;
        }

        .rdrMonth .rdrWeekDays {
          padding: 0;
        }

        .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName {
          display: none;
        }

        .rdrWeekDay {
          font-weight: ${theme.font.fontWeights.medium};
          line-height: 2.667em;
          color: rgb(132, 144, 149);
        }

        .rdrDay {
          background: transparent;
          user-select: none;
          border: 0;
          padding: 0;
          line-height: 3em;
          height: 3em;
          text-align: center;
          color: ${theme.palette.accents_12};
        }

        .rdrDay:focus {
          outline: 0;
        }

        .rdrDayNumber {
          outline: 0;
          font-weight: ${theme.font.fontWeights.regular};
          position: absolute;
          left: 0;
          right: 0;
          top: ${theme.layout.gapQuarter};
          bottom: ${theme.layout.gapQuarter};
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .rdrDayToday .rdrDayNumber span {
          font-weight: ${theme.font.fontWeights.medium};
        }
        .rdrDayNumber span {
          color: ${theme.palette.accents_12};
        }

        .rdrDayToday .rdrDayNumber span:after {
          content: '';
          position: absolute;
          bottom: calc(${theme.layout.gapHalf} / 3);
          left: 50%;
          transform: translate(-50%, 0);
          width: calc(${theme.layout.gap} - 2px);
          height: 2px;
          border-radius: 2px;
          background: #3d91ff;
        }

        .rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,
        .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,
        .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,
        .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {
          background: ${theme.palette.background};
        }

        .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,
        .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
        .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
        .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {
          color: rgba(255, 255, 255, 0.85);
        }

        .rdrSelected,
        .rdrInRange,
        .rdrStartEdge,
        .rdrEndEdge {
          background: currentColor;
          position: absolute;
          top: ${theme.layout.gapQuarter};
          left: 0;
          right: 0;
          bottom: ${theme.layout.gapQuarter};
        }

        .rdrSelected {
          left: 2px;
          right: 2px;
        }

        .rdrInRange {
        }

        .rdrStartEdge {
          border-top-left-radius: 1.042em;
          border-bottom-left-radius: 1.042em;
          left: 2px;
        }

        .rdrEndEdge {
          border-top-right-radius: 1.042em;
          border-bottom-right-radius: 1.042em;
          right: 2px;
        }

        .rdrSelected {
          border-radius: 1.042em;
        }

        .rdrDayStartOfMonth .rdrInRange,
        .rdrDayStartOfMonth .rdrEndEdge,
        .rdrDayStartOfWeek .rdrInRange,
        .rdrDayStartOfWeek .rdrEndEdge {
          border-top-left-radius: 1.042em;
          border-bottom-left-radius: 1.042em;
          left: 2px;
        }

        .rdrDayEndOfMonth .rdrInRange,
        .rdrDayEndOfMonth .rdrStartEdge,
        .rdrDayEndOfWeek .rdrInRange,
        .rdrDayEndOfWeek .rdrStartEdge {
          border-top-right-radius: 1.042em;
          border-bottom-right-radius: 1.042em;
          right: 2px;
        }

        .rdrDayStartOfMonth .rdrDayInPreview,
        .rdrDayStartOfMonth .rdrDayEndPreview,
        .rdrDayStartOfWeek .rdrDayInPreview,
        .rdrDayStartOfWeek .rdrDayEndPreview {
          border-top-left-radius: 1.333em;
          border-bottom-left-radius: 1.333em;
          border-left-width: 1px;
          left: 0px;
        }

        .rdrDayEndOfMonth .rdrDayInPreview,
        .rdrDayEndOfMonth .rdrDayStartPreview,
        .rdrDayEndOfWeek .rdrDayInPreview,
        .rdrDayEndOfWeek .rdrDayStartPreview {
          border-top-right-radius: 1.333em;
          border-bottom-right-radius: 1.333em;
          border-right-width: 1px;
          right: 0px;
        }

        .rdrDayStartPreview,
        .rdrDayInPreview,
        .rdrDayEndPreview {
          background: rgba(255, 255, 255, 0.09);
          position: absolute;
          top: 3px;
          left: 0px;
          right: 0px;
          bottom: 3px;
          pointer-events: none;
          border: 0px solid currentColor;
          z-index: 1;
        }

        .rdrDayStartPreview {
          border-top-width: 1px;
          border-left-width: 1px;
          border-bottom-width: 1px;
          border-top-left-radius: 1.333em;
          border-bottom-left-radius: 1.333em;
          left: 0px;
        }

        .rdrDayInPreview {
          border-top-width: 1px;
          border-bottom-width: 1px;
        }

        .rdrDayEndPreview {
          border-top-width: 1px;
          border-right-width: 1px;
          border-bottom-width: 1px;
          border-top-right-radius: 1.333em;
          border-bottom-right-radius: 1.333em;
          right: 2px;
        }

        .rdrDefinedRangesWrapper {
          font-size: 12px;
          width: 226px;
          border-right: solid 1px ${theme.palette.accents_2};
          background: ${theme.palette.background};
        }

        .rdrDefinedRangesWrapper .rdrStaticRangeSelected {
          color: currentColor;
          font-weight: ${theme.font.fontWeights.medium};
        }

        .rdrStaticRange {
          border: 0;
          cursor: pointer;
          display: block;
          outline: 0;
          border-bottom: 1px solid ${theme.palette.accents_2};
          padding: 0;
          background: ${theme.palette.background};
        }

        .rdrStaticRange:hover .rdrStaticRangeLabel,
        .rdrStaticRange:focus .rdrStaticRangeLabel {
          background: ${theme.palette.accents_2};
        }

        .rdrStaticRangeLabel {
          display: block;
          outline: 0;
          line-height: 18px;
          padding: ${theme.layout.gapHalf} ${theme.layout.gap};
          text-align: left;
        }

        .rdrInputRanges {
          padding: ${theme.layout.gapHalf} 0;
        }

        .rdrInputRange {
          align-items: center;
          padding: ${theme.layout.gapQuarter} ${theme.layout.gap};
        }

        .rdrInputRangeInput {
          width: ${SCALES.width(2.5)};
          height: ${SCALES.height(1.5)};
          line-height: ${SCALES.height(1.5)};
          border-radius: ${theme.layout.radius};
          text-align: center;
          border: 1px solid ${theme.palette.accents_2};
          margin-right: ${theme.layout.gapHalf};
          background: ${theme.palette.background};
          color: ${theme.palette.accents_9};
        }

        .rdrInputRangeInput:focus,
        .rdrInputRangeInput:hover {
          border-color: ${theme.palette.accents_8};
          outline: 0;
          color: ${theme.palette.accents_11};
        }

        .rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after {
          content: '';
          border: 1px solid currentColor;
          border-radius: 1.333em;
          position: absolute;
          top: ${theme.layout.gapQuarterNegative};
          bottom: ${theme.layout.gapQuarterNegative};
          left: 0;
          right: 0;
          background: transparent;
        }

        .rdrDayPassive {
          pointer-events: none;
        }

        .rdrDayPassive .rdrDayNumber span {
          color: ${theme.palette.accents_10};
        }

        .rdrDayPassive .rdrInRange,
        .rdrDayPassive .rdrStartEdge,
        .rdrDayPassive .rdrEndEdge,
        .rdrDayPassive .rdrSelected,
        .rdrDayPassive .rdrDayStartPreview,
        .rdrDayPassive .rdrDayInPreview,
        .rdrDayPassive .rdrDayEndPreview {
          display: none;
        }

        .rdrDayDisabled {
          background-color: rgb(248, 248, 248);
        }

        .rdrDayDisabled .rdrDayNumber span {
          color: #aeb9bf;
        }

        .rdrDayDisabled .rdrInRange,
        .rdrDayDisabled .rdrStartEdge,
        .rdrDayDisabled .rdrEndEdge,
        .rdrDayDisabled .rdrSelected,
        .rdrDayDisabled .rdrDayStartPreview,
        .rdrDayDisabled .rdrDayInPreview,
        .rdrDayDisabled .rdrDayEndPreview {
          filter: grayscale(100%) opacity(60%);
        }

        .rdrMonthName {
          text-align: left;
          font-weight: ${theme.font.fontWeights.medium};
          color: #849095;
          padding: 0.833em;
        }
      `}</style>
    </>
  )
}

DateRange.defaultProps = defaultProps
const Button = withScale(DateRange)
export default Button