import React, { useContext } from 'react'
import classnames from 'classnames'
import { isPast, isSameDay, isAfter, isWithinInterval } from 'date-fns'
import useSWR from 'swr'
import Calendar, { DateCallback } from 'react-calendar'
import { dateFormatBackend } from '../../helpers/date'
import { WizardContext } from './context/wizardStore'

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

export default function MyCalendar() {
  const { onChange, state } = useContext(WizardContext)
  const { startDate: start, endDate: end } = state.formData
  const startDate = (start && new Date(start)) || null
  const endDate = (end && new Date(end)) || null
  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
    '/api/daysbooked',
    fetcher
  )

  function tileClassName({ date, view }) {
    const isMonthView = view === 'month'
    const isDaysBookedLoaded = !!daysBooked
    const isInPast = isPast(date)
    const isBooked = daysBooked?.includes(dateFormatBackend(date))
    return classnames({
      'react-calendar__tile--past': isInPast,
      'react-calendar__tile--booked':
        isMonthView && isDaysBookedLoaded && isBooked && !isInPast,
      'react-calendar__tile--free':
        isMonthView && isDaysBookedLoaded && !isBooked && !isInPast,
      'react-calendar__tile--selected':
        (startDate &&
          isWithinInterval(date, {
            start: startDate,
            end: endDate || startDate,
          })) ||
        isSameDay(date, startDate),
    })
  }

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

  return (
    <div className="mb-12 p-6 bg-blue-100 rounded">
      <h2 className="text-xl">Buchungsübersicht</h2>
      <Calendar
        minDate={new Date()}
        // @ts-ignore
        onClickDay={(date, event: React.MouseEvent<HTMLInputElement>) => {
          event.preventDefault()
          event.stopPropagation()

          const targetClassList = event.currentTarget.classList

          if (
            targetClassList.contains('react-calendar__tile--past') ||
            targetClassList.contains('react-calendar__tile--booked')
          ) {
            return
          }

          if (!startDate || !!endDate) {
            onChange({ startDate: dateFormatBackend(date), endDate: null })
            return
          }

          // when startDate set, but end missing
          if (isAfter(date, startDate)) {
            onChange({ endDate: dateFormatBackend(date) })
          } else {
            onChange({ startDate: dateFormatBackend(date), endDate: start })
          }
        }}
        tileClassName={tileClassName}
        value={null}
      />
      <div className="mt-6 flex justify-center">
        <div>
          <div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div>
          <span className="ml-2">Frei</span>
        </div>
        <div>
          <div className="ml-6 inline-block w-5 h-5 bg-red-200 rounded align-text-bottom"></div>
          <span className="ml-2">Belegt</span>
        </div>
      </div>
    </div>
  )
}