import React, { useContext } from 'react'
import { WizardContext } from './context/wizardStore'
import InputWrapper from '../inputWrapper'
import Calendar from '../calendar'

export default function DateSelect() {
  const { onChangeEvent, onChange, state } = useContext(WizardContext)
  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"
        />
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div className="">
            <label className="flabel inline-block mr-3" htmlFor="startDate">
              Von
            </label>
            <input
              required
              type="date"
              className="input-text"
              name="startDate"
              value={startDate || ''}
              onChange={onChangeEvent}
              min={today}
            />
          </div>
          <div className="">
            <label className="flabel inline-block mr-3" htmlFor="endDate">
              Bis
            </label>
            <input
              required
              type="date"
              className="input-text"
              name="endDate"
              value={endDate || ''}
              placeholder="Von"
              onChange={onChangeEvent}
              min={startDate || today}
            />
          </div>
        </div>
      </InputWrapper>
    </>
  )
}