import React, { useContext } from 'react'
import { BookContext } from '../../context/book'
import InputWrapper from '../inputWrapper'
import Input from '../input'
import Calendar from '../calendar'

export default function DateSelect() {
  const { onChangeEvent, onChange, state } = useContext(BookContext)
  const { startDate, endDate } = state.formData

  const today = new Date().toISOString().substring(0, 10)

  return (
    <>
      <InputWrapper label="Datum" required>
        <Calendar
          start={startDate}
          end={endDate}
          onChange={onChange}
          className="my-6 max-w-lg"
        />
        </InputWrapper>
        <div className="flex flex-wrap -mx-3 mb-2">
          <div className="w-full md:w-1/3 px-3 mb-2 md:mb-0">
            <Input
              label="Von"
              type="date"
              className=""
              name="startDate"
              value={startDate || ''}
              onChange={onChangeEvent}
              min={today}
              required
            />
          </div>
          <div className="w-full md:w-1/3 px-3 mb-2 md:mb-0">
            <Input
              required
              label="Bis"
              type="date"
              className=""
              name="endDate"
              value={endDate || ''}
              placeholder="Von"
              onChange={onChangeEvent}
              min={startDate || today}
            />
          </div>
        </div>
    </>
  )
}