import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames'
import {
  differenceInDays,
  differenceInMonths,
  isSameMonth,
  set
} from 'date-fns/fp'
import React, { useState, useEffect } from 'react'

import Calendar from './Calendar'

const styles = {
  wrapper: {
    backgroundColor: 'white',
    borderRadius: 10
  }
}

const useStyles = makeStyles(styles)

const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
  const [from, setFrom] = useState(null)
  const [to, setTo] = useState(null)

  useEffect(() => {
    onRangeChange(from, to)
  }, [from, onRangeChange, to])

  const classes = useStyles()

  const handleSelect = (day, minDate, maxDate) => {
    if (
      (maxDate && differenceInDays(maxDate, day) > 0) ||
      (minDate && differenceInDays(day, minDate) > 0)
    )
      return

    if (from && !to && differenceInDays(day, from) > 0) {
      setTo(from)
      setFrom(day)
      return
    }

    if (
      from &&
      !to &&
      (isSameMonth(from, day) || differenceInMonths(from, day) > 0)
    ) {
      setTo(
        set({ hours: 23, minutes: 59, seconds: 59, milliseconds: 999 }, day)
      )
      return
    }

    setFrom(day)
    setTo(null)
  }

  return (
    <>
      <div className={classnames(classes.wrapper, className)}>
        <Calendar
          from={from}
          to={to}
          minDate={minDate}
          maxDate={maxDate}
          handleSelect={handleSelect}
        />
      </div>
    </>
  )
}

export default DateRangePicker