// 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 === "Mathews Krista Jean") {
      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={false}>
      hi
    </div>
  );
}

export default InvestorInfo;