pfadi-bussle/components/wizard/dateSelect.tsx

import 'moment/locale/de'
import React, { useContext, useEffect, useRef, useState } from 'react'
import { DateUtils, RangeModifier } from 'react-day-picker'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import MomentLocaleUtils from 'react-day-picker/moment'
import useSWR from 'swr'
import { getNextBigger, getNextSmaller } from '../../helpers/array'
import { dateFormatBackend } from '../../helpers/date'
import { WizardContext } from './context/wizardStore'
import InputWrapper from './inputWrapper'

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

export default function DateSelect() {
  const { onChange } = useContext(WizardContext)
  const [range, setRange] = useState<RangeModifier>({
    from: undefined, //state.startDate && new Date(state.startDate),
    to: undefined, //state.endDate && new Date(state.endDate),
  })
  const { from, to } = range
  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
    '/api/daysbooked',
    fetcher
  )
  const prevBookedDay = getNextSmaller(
    daysBooked,
    dateFormatBackend(from || to)
  )
  const nextBookedDay = getNextBigger(daysBooked, dateFormatBackend(from || to))

  const fromRef = useRef<DayPickerInput>()
  const toRef = useRef<DayPickerInput>()

  function dayBooked(day: Date) {
    return daysBooked && daysBooked.includes(dateFormatBackend(day))
  }

  function dayDisabled(day: Date) {
    return (
      DateUtils.isPastDay(day) ||
      dayBooked(day) ||
      (prevBookedDay && day < new Date(prevBookedDay)) ||
      (nextBookedDay && day > new Date(nextBookedDay)) ||
      day < from
    )
  }

  useEffect(() => {
    toRef.current?.getInput().focus()
  }, [from])

  useEffect(() => {
    onChange({ startDate: from?.toISOString(), endDate: to?.toISOString() })
  }, [from, to])

  const disabledDays = [dayDisabled]
  const modifiers = {
    dayBooked,
    start: from,
    end: to,
  }

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

  return (
    <InputWrapper label="Datum" required>
      <DayPickerInput
        ref={fromRef}
        inputProps={{ className: 'input-text', required: true }}
        value={from}
        placeholder="Von"
        formatDate={MomentLocaleUtils.formatDate}
        parseDate={MomentLocaleUtils.parseDate}
        dayPickerProps={{
          locale: 'de',
          localeUtils: MomentLocaleUtils,
          className: 'datepicker',
          disabledDays,
          modifiers,
          numberOfMonths: 1,
        }}
        onDayChange={(from) => setRange({ ...range, from })}
      />
      {' - '}
      <DayPickerInput
        ref={toRef}
        inputProps={{
          className: 'input-text',
          disabled: !from,
          required: true,
        }}
        value={to}
        placeholder="Bis"
        formatDate={MomentLocaleUtils.formatDate}
        parseDate={MomentLocaleUtils.parseDate}
        dayPickerProps={{
          locale: 'de',
          localeUtils: MomentLocaleUtils,
          className: 'datepicker',
          selectedDays: [from, { from, to }],
          disabledDays,
          modifiers,
          numberOfMonths: 1,
          month: from,
          fromMonth: from,
        }}
        onDayChange={(to) => setRange({ ...range, to })}
      />
      <button
        onClick={() => setRange({ from: undefined, to: undefined })}
        className="ibtn"
      >
        <svg className="w-full" viewBox="0 0 352 512">
          <path
            fill="currentColor"
            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
          ></path>
        </svg>
      </button>
    </InputWrapper>
  )
}