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

// CSS import
import '../css/UserCheckin.css';

/**
 * 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 InvestorInfo(props) {
  const [info, setInfo] = useState({});

  const toEpochMilli = date => Date.parse(date);
  const getInfo = () => {
    console.log({ 
      person: props.name,
      start:  toEpochMilli(props.dates.start), 
      end:    toEpochMilli(props.dates.end) 
    });

    if (props.name === "") {
      return;
    }
  
    fetch("http://localhost:4567/profit", {
        method: "POST",
        body: JSON.stringify({ 
          person: props.name,
          start:  toEpochMilli(props.dates.start), 
          end:    toEpochMilli(props.dates.end) 
        }),
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "same-origin"
    })
    .then(res  => {
      console.log(res);
      res.json();
    })
    .then(data => {
      console.log(data);
      setInfo(data);
    })
    .catch(err => console.log(err));
  }
  /*

  const coords = userCoords.map((coord, index) =>
    <li key={index}>
        <span>{'('+coord[0].toFixed(6)}, {coord[1].toFixed(6)+')'}</span>
    </li>
  );*/

  useEffect(() => getInfo(), [props.name, props.isSelected, props.personId])

  return (
    <div className="Chosen-user" hidden={props.isSelected}>
      hi
    </div>
  );
}

export default InvestorInfo;