import { useContext, useState } from 'react'
import useSWR from 'swr'

import { WizardContext, ACTIONS } from '../context/wizardStore'

import Form from 'react-bootstrap/Form'

import moment from 'moment'
import 'react-dates/initialize'
import { DateRangePicker, SingleDatePicker } from 'react-dates'

const fetcher = (path) => fetch(path).then((r) => r.json())

export default function DateSelect() {
  const [focusedInput, setFocusedInput] = useState(null)
  const { state, dispatch } = useContext(WizardContext)
  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
    '/api/daysbooked',
    fetcher
  )

  const { multipleDays, startDate, endDate } = state.formData

  function isDayBlocked(momentDay) {
    return (
      daysBooked && daysBooked.some((rawDay) => momentDay.isSame(rawDay, 'day'))
    )
  }

  if (fetchBookedOnError) {
    return (
      <div>
        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden.
        Versuchen Sie es später nochmals.
      </div>
    )
  }

  return (
    <>
      <Form.Group controlId="dateSelect">
        <Form.Label>Willst du einen odere mehrere Tage buchen?</Form.Label>
        <Form.Check
          type="radio"
          id={'multipleDays-single'}
          label="Einen Tag"
          name="multipleDays"
          value="single"
          checked={multipleDays === false}
          onChange={() => {
            setFocusedInput(null)
            dispatch({
              type: ACTIONS.SET_FORM_DATA,
              payload: {
                multipleDays: false,
                startDate: null,
                endDate: null,
              },
            })
          }}
        />
        <Form.Check
          type="radio"
          id={'multipleDays-multiple'}
          label="Mehrere Tage"
          name="multipleDays"
          value="multiple"
          checked={multipleDays === true}
          onChange={() => {
            setFocusedInput(null)
            dispatch({
              type: ACTIONS.SET_FORM_DATA,
              payload: {
                multipleDays: true,
                startDate: null,
                endDate: null,
              },
            })
          }}
        />
      </Form.Group>
      {multipleDays !== null && (
        <Form.Group>
          <Form.Label component="legend" style={{ display: 'block' }}>
            Datum
          </Form.Label>
          {multipleDays === false && (
            <SingleDatePicker
              small={true}
              date={startDate && moment(startDate)}
              placeholder="Datum"
              numberOfMonths={1}
              onDateChange={(date) =>
                dispatch({
                  type: ACTIONS.SET_FORM_DATA,
                  payload: {
                    startDate: date && date.toISOString(),
                  },
                })
              }
              focused={typeof focusedInput === 'boolean' && focusedInput}
              onFocusChange={({ focused }) => setFocusedInput(focused)}
              isDayBlocked={isDayBlocked}
              id="startDate"
            />
          )}
          {multipleDays === true && (
            <DateRangePicker
              small={true}
              startDate={startDate && moment(startDate)}
              startDateId="startDate"
              startDatePlaceholderText="Start"
              endDatePlaceholderText="Ende"
              numberOfMonths={1}
              endDate={endDate && moment(endDate)}
              endDateId="endDate"
              onDatesChange={({ startDate, endDate }) => {
                dispatch({
                  type: ACTIONS.SET_FORM_DATA,
                  payload: {
                    startDate: startDate && startDate.toISOString(),
                    endDate: endDate && endDate.toISOString(),
                  },
                })
              }}
              focusedInput={focusedInput}
              onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
              isDayBlocked={isDayBlocked}
              minDate={moment()}
            />
          )}
        </Form.Group>
      )}
    </>
  )
}