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

// CSS import
import "../css/UserCheckin.css";
import "../css/InvesterInfo.css";
import uuid from "react-uuid";

/**
 * 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({
    percentGain: 0,
    percentSP500: 0,
    holdings: []
  });

  const [showStocks, setShowStocks] = useState(false);
  const [showFollowers, setShowFollowers] = useState(false);

  const getInfo = () => {
    if (props.selectedId === -1) {
      return;
    }

    const toEpochMilli = date => Date.parse(date);

    console.log({
      selectedId: props.selectedId,
      startTime: toEpochMilli(props.dates.start),
      endTime: toEpochMilli(props.dates.end),
    });

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

  const stockTable = () => {
    return (
      <>
      <li class="Stock-row">
        <div className="tableHeader">
          <div className="symbol-row">Symbol</div>
          <div className="gain-row">Realized gain</div>
          <div className="gain-row">Unrealized gain</div>
        </div>
      </li>
      {info.holdings.map(holding => 
      <li class="Stock-row">
        <div className="symbol-row">{holding.ticker}</div>
        <div className="gain-row">{holding.realizedGain.toFixed(3)}</div>
        <div className="gain-row">{holding.unrealizedGain.toFixed(3)}</div>
      </li>)}
      </>
    );
  };

  const followerList = () => 
    props.followers.map(follower => <li key={uuid()} class="Clickable-name" onClick={() => props.setSelectedId(follower.id)}>{follower.name}</li>);

  // Hook that updates when selected has changed
  useEffect(() => getInfo(), [props.selectedId]);

  return (
    <div className="Chosen-user" hidden={!props.showSelectedInfo}>
      <h3>
        <span onClick={() => props.setShowSelectedInfo(false)}><img className="Img-btn" src="assets/round_arrow_back_white_18dp.png" alt="image"/></span>
        <span>CIK: {props.selectedId}</span>
      </h3>
      <h2 id="investerName">
        {props.name}
      </h2>
      <div id="top-bar">
        <div id="gain-number">
          <p className="bigNumber">{info.percentGain.toFixed(3)}$</p> gain
        </div>

        <div>
          <p className="bigNumber">{info.percentGain.toFixed(3)}%</p>
          compared to {info.percentSP500.toFixed(3)}% on SP500
        </div>
      </div>

      <div>
        <div className="Checkin">
          <div className="Img-flex">
                <span className="tableHeader">View trades</span>
                <img className="Img-btn" hidden={showStocks} onClick={() => setShowStocks(toggle => !toggle)} src="assets/round_expand_more_white_18dp.png" alt="image"/>
                <img className="Img-btn" hidden={!showStocks} onClick={() => setShowStocks(toggle => !toggle)} src="assets/round_expand_less_white_18dp.png" alt="image"/>
          </div>
          <ul hidden={!showStocks} class="Stock-table">{stockTable()}</ul>
        </div>

        <div className="Checkin" hidden={!followerList}>
          <div className="Img-flex">
              <span className="tableHeader">View followers</span>
              <img className="Img-btn" hidden={showFollowers} onClick={() => setShowFollowers(toggle => !toggle)} src="assets/round_expand_more_white_18dp.png" alt="image"/>
              <img className="Img-btn" hidden={!showFollowers} onClick={() => setShowFollowers(toggle => !toggle)} src="assets/round_expand_less_white_18dp.png" alt="image"/>
          </div>
          <ul hidden={!showFollowers}>{followerList()}</ul>
        </div>
      </div>

    </div>
  );
}

export default InvestorInfo;