// React import
import { useEffect, useState, useRef } from "react";

/**
 * Componenet for checkins. Has a toggle to show more info.
 * @param {Object} props The props of the component.
 * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
 */
function DateInput(props) {
  const startInput = useRef();
  const endInput = useRef();

  const toValue = date => date.toISOString().slice(0, 10);

  useEffect(() => setInitDates(), []);

  const setInitDates = () => {
    startInput.current.value = toValue(new Date());

    // Two weeks away -> from stack overflow,
    const fortnightAway = toValue(new Date(Date.now() - 12096e5));
    endInput.current.value = fortnightAway;
  }

  return (
    <>
      <label for="start">Start date:</label>
      <input type="date" id="start" ref={startInput} onChange={(e) => props.setStart(e.target.value)}/>
      <label for="end">End date:</label>
      <input type="date" id="end" ref={endInput} onChange={(e) => props.setEnd(e.target.value)}/>
    </>
  );
}

export default DateInput;