import { useContext } from 'react'
import { AppContext, ACTIONS } from '../context/appStore'

import Form from 'react-bootstrap/Form'

export default function RangeSelect() {
  const { state, dispatch } = useContext(AppContext)

  function getValue() {
    const { multipleDays } = state

    if (multipleDays === null || multipleDays === undefined) {
      return null
    }

    if (multipleDays === true) {
      return 'multiple'
    }

    return 'single'
  }

  return (
    <Form.Group controlId="dateSelect">
      <Form.Label>Willst du einen odere mehrere Tage buchen?</Form.Label>
      <Form.Check
        type="radio"
        id={'multipleDays-single'}
        label="Einen Tag"
        name="multipleDays"
        value="single"
        checked={state.multipleDays === false}
        onChange={() =>
          dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: false })
        }
      />
      <Form.Check
        type="radio"
        id={'multipleDays-multiple'}
        label="Mehrere Tage"
        name="multipleDays"
        value="multiple"
        checked={state.multipleDays === true}
        onChange={() =>
          dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: true })
        }
      />
    </Form.Group>
  )
}