import { useEffect, useState } from "react";

import '../css/Modal.css';


function Modal() {
 
  const [count, setCount] = useState(0);

  const nextModal1 = () => {
    setCount(1);
  }
  const nextModal2 = () => {
    setCount(2);
  }
  const nextModal3 = () => {
    setCount(3);
  }
  const nextModal4 = () => {
    setCount(4);
  }
  const startModal = () => {
    document.getElementById("main-modal").style.display = 'block';
    setCount(0);
  }
  const exitModal = () => {
    document.getElementById("main-modal").style.display = 'none';
  }


  return (
    <div>
    <div id="main-modal"className="modal" style={{display : 'block'}}>
      {(count == 0) && <p className="m modal0">
        <p className="align-center"><span className="span">Welcome to WatchDogs!</span></p> 
        <p className="align-center">Click start for an introduction to the WatchDogs interface.</p>
        <p className="align-center"><button className="next" onClick={nextModal1}>Start</button></p>
        <p className="align-center"><button className="skip" onClick={exitModal}>Skip</button></p>
        </p>}
      {(count == 1) && <p className="m modal1">
        <p className="align-right"><i class="arrow right"></i></p>
        <span className="span">This is the suspicion ranking pane,</span> which displays 
        high-profile traders and the suspicion score our algorithm assigned 
        to them. The higher an individual is ranked, the more likely they are involved in insider trading.
        <p className="align-center"><button className="next" onClick={nextModal2}>Next</button></p>
      </p>}
      {(count == 2) && <p className="m modal2">
        <p></p>
        <span className="span">The Timeframe pane </span> 
        allows you to chose the timespan you'd like to see trade data from. Individuals' suspicion score will
        be calculated based on the trades that occured during the timeframe you select. 
        <p className="align-center"><button className="next" onClick={nextModal3}>Next</button></p>
        <p className="align-right"><i class="arrow down"></i></p>
      </p>}
      {count == 3 && <p className="m modal3">
        <p className="align-left"><i class="arrow left"></i></p>
        <span className="span">The Trader Graph </span> 
        shows how traders are related. Click on a name in the graph to see more information about that individual. 
        <p className="align-center"><button className="next" onClick={nextModal4}>Next</button></p>
      </p>}
      {count == 4 && <p className="m modal4">
        <button className="next" onClick={exitModal}>You're ready to start using WatchDogs!</button>
      </p>}
    </div>
    <span className="restart-modal align-center"  onClick={startModal}></span>  
    </div>
  );
}

export default Modal;