import '../App.css';
import {useEffect,useState } from "react"
import { useLocation } from "react-router-dom";
import { SquareFill, ChevronDown, ChevronUp} from 'react-bootstrap-icons';
import {minutesElapsed, secondsElapsed} from './Quiz';
import Answer from './components/Answer';
import Scores from './components/Scores';
import Corrections from './components/Corrections';
import Report from './components/Report';
import { Button, Accordion } from 'react-bootstrap';



// Key for displaying topics:
function Key(props){
  var keys = []
  var index = 0;
  for(const key in props.topics){
    keys[index] = key.charAt(0).toUpperCase() + key.slice(1);
    index ++;
  }
  return(
    <div className='text-center key bg-white'>
     {keys.map((key)=> <div className='d-inline' style={{padding: ".5em"}}><SquareFill className={key.toLowerCase()}/> {key}</div>)}
    </div>
  );
}




function Results() {

  const minutes = minutesElapsed;
  const seconds = secondsElapsed;
  const [results, setResults] = useState({});
  const [showCorrect, setShowCorrect] = useState(false);
  const [selectedTab, setSelectedTab] = useState('scores');
  const { state } = useLocation();
  let overallScore = state.overallScore;

  useEffect(() => {
    console.log("Results from results page: ");
    console.log(state);
    setResults(state);
    
  }, [])

 
  //Comparative Semantic Analysis, Keywords (Topics) missing, Organizational Score, Spelling / Grammar Analysis, Coherence/Tone Score, Total Words
  return(
      <div className="Results">
          <div className='container d-flex' style={{padding: '0'}} >
            <div style={{flex:'60', padding: ' 0 1em'}}>
              <h1 style={{marginTop:'.5em'}}>Your Results <span id = "overallScore" style={{float:'right', background: overallScore > 80 ? "#4CC790" : overallScore > 60 ? "#ff9f00" : overallScore <60  ? "#ed4141" : "" , opacity:'75%'}}>{overallScore}/100</span></h1> 
              <hr></hr>
              <Answer results={state} data="Student" />
              <Accordion>
                <Accordion.Item eventKey="0">
                  <Accordion.Header>View Correct Answer</Accordion.Header>
                  <Accordion.Body>
                  <Answer results={state} data="Professor"/>
                  <Key topics = {state.prof_topics}></Key>
                  </Accordion.Body>
                </Accordion.Item>
              </Accordion>
              
            </div>
            

            <div className='shadow'  style={{flex:'40', padding: '0', }}>
              <div className='tabs d-flex' >
                <button className={selectedTab === 'scores' ? 'active' : ""} style={{flex: '33'}} onClick={() => setSelectedTab('scores')}>
                  Scores
                </button>
                <button className={selectedTab === 'corrections' ? 'active' : ""} style={{flex: '33'}} onClick={() => setSelectedTab('corrections')}>
                  Corrections
                </button>
                <button className={selectedTab === 'reports' ? 'active' : ""} style={{flex: '33'}} onClick={() => setSelectedTab('reports')}>
                  Report
                </button>
              </div> 

              {selectedTab === 'scores' && <Scores results = {state}/>}
              {selectedTab === 'corrections' && <Corrections results = {state}/>}
              {selectedTab === 'reports' && <Report results = {state}/>}

            </div>
              
            <div></div>
            
          </div>
    </div>
  )
}


export default Results