// 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,
    moneyIn: 0,
    moneyOut: 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">
        <a href={"https://sec.report/CIK/" + props.selectedId + "/Insider-Trades"} target="_blank">
          {props.name}
          <img src="link-icon.svg" alt="image" />
        </a>
      </h2>
      <div id="top-bar">
        <div id="gain-number">
          <p className="bigNumber">{(info.moneyOut - info.moneyIn).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 returns</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;