// React and component imports
import { useEffect, useState, useRef } from "react";
import Hub from "./Hub.js";
import InvestorInfo from "./InvestorInfo.js";

// CSS import
import '../css/UserCheckin.css';
import HubList from "./HubList.js";

/**
 * Component that build the checkin list and displays checkin info.
 * @returns {import('react').HtmlHTMLAttributes} A div with the hubs 
 * in a vertical layout.
 */
function HubWidget(props) {
  // States for selected person
  const [followers, setFollowers] = useState([]);
  const [selectedName, setSelectedName] = useState([]);

  const [searching, setSearching] = useState(false);
  const textInput = useRef();

  const [showSelectedInfo, setShowSelectedInfo] = useState(false);

  const updateSelected = () => {
    props.data.forEach(holder => {
      if (holder.id === props.selectedId) {
        console.log(holder);
        setFollowers(holder.followers);
        setSelectedName(holder.name);
      }
    });
  }

  // Don't need to fetch if repeat id...
  const updateSelectedId = id => {
    setShowSelectedInfo(true);
    props.setSelectedId(id);
  }
  
  // Hook to update and show the info when a user is clicked on ... 
  useEffect(() => {
    updateSelected();
  }, [props.selectedId]);
  // On init, don't show...
  useEffect(() => setShowSelectedInfo(false), []);

  useEffect(() => {
    if (searching) {
      return;
    }
    textInput.current.value = "";
    setQueryString("");
  }, [searching])

  const [queryString, setQueryString] = useState("");

  return (
    <>
      <div className="User-checkin">
        <div className="Checkins">
          <h2 className="Img-flex Title">
            <span hidden={searching}>Sus Ranks</span>
            <input ref={textInput} hidden={!searching} type="text" onChange={e => setQueryString(e.target.value)} placeholder="Search by name"></input>
            <img className="Img-btn" hidden={searching} onClick={() => setSearching(true)} src="assets/outline_search_white_18dp.png" alt="image"/>
            <img className="Img-btn" hidden={!searching} onClick={() => setSearching(false)} src="assets/outline_cancel_white_18dp.png" alt="image"/>
          </h2>
          <HubList data={props.data} setSelectedId={updateSelectedId} queryString={queryString} searching={searching}></HubList>
        </div>
        <InvestorInfo
          selectedId={props.selectedId}
          setSelectedId={updateSelectedId}
          dates={props.dates}
          setShowSelectedInfo={setShowSelectedInfo}
          showSelectedInfo={showSelectedInfo}
          followers={followers}
          name={selectedName}
        ></InvestorInfo>
      </div>
    </>
  );
}

export default HubWidget;