import { useState } from 'react'

import moment from 'moment'

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

export default function Home() {

  const [multipleDays, setMultipleDays] = useState(null);

  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput ] = useState(null);

  return (
    <form>
      <div>
        Ich will das Bussle für
        <div>
            <input type="radio" id="single" name="days" value="singleDay" onChange={() => setMultipleDays(false)} />
            <label for="single">einen Tag</label> 
        </div>
        <div>
          <input type="radio" id="multiple" name="days" value="multipleDays" onChange={() => setMultipleDays(true)}/>
          <label for="multiple">mehrere Tage</label>
        </div>
        {' '}mieten
      </div>

      { multipleDays === false && (
        <div>
          <SingleDatePicker
            date={startDate}
            onDateChange={date => setStartDate(date)}
            focused={typeof focusedInput === 'boolean' && focusedInput}
            onFocusChange={({ focused }) => setFocusedInput(focused)}
            id="your_unique_id"
          />
        </div>
      ) }

      { multipleDays === true && (
        <div>
          <DateRangePicker
            startDate={startDate}
            startDateId="bussle_start_date_id"
            endDate={endDate}
            endDateId="bussle_end_date_id"
            onDatesChange={({ startDate, endDate }) => {
              setStartDate(startDate)
              setEndDate(endDate)
            }}
            focusedInput={focusedInput}
            onFocusChange={focusedInput => setFocusedInput(focusedInput)}
            minDate={moment()}
          /> 
        </div>
      )}
    </form>
  )
}