// React/Component imports
import { useEffect, useState } from "react";
import DateSelector from './DateSelector.js';

// CSS imports
import '../css/Route.css';


/**
 * The component that hold the forms for routing.
 * @param {Object} props
 */
function TimeSelector(props) {
  const [current, setCurrent] = useState("");

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

  const [startDate, setStartDate] = useState(props.dates.start);
  const [endDate, setEndDate] = useState(props.dates.end);

  const changeTimeframe = () => {
    props.setDates({
      start: startDate,
      end: endDate
    });
  }

  useEffect(() => setCurrent(""), [startDate, endDate]);
  
  // The div with the html elements for routing.
  return (
    <div className="Route">
      <div className="Coord-selectors-flex">
        <DateSelector side={"left"} name={"Start Date"} className="Coord-select-left" clickedFunc={setCurrent}
          changedFunc={setStartDate}  disabled={current==='start' || props.isChanging} value={toValue(startDate)}></DateSelector>
        <div>
          <h2>Adjust Timeframe</h2>
          <button className="Btn Route-btn" onClick={() => changeTimeframe()}
          disabled={current!=="" || props.isChanging}>Change Timeframe</button>
        </div>
        <DateSelector side={"right"} name={"End Date"} className="Coord-select-right" clickedFunc={setCurrent}
          changedFunc={setEndDate} disabled={current==='end' || props.isChanging} value={toValue(endDate)}></DateSelector>
      </div>
    </div>
  );
}

export default TimeSelector;