import '../../App.css';
import {OverlayTrigger, Tooltip, Button} from 'react-bootstrap';
import {InfoCircle, EmojiNeutral, EmojiSmile, EmojiFrown } from 'react-bootstrap-icons';

function Score(props){
    
    let score = props.score
    return(
      <div className="single-chart d-flex w-100">
        <div style={{width: '100%', height: '100px', flex: '25'}}>
        <svg viewBox="0 0 50 50" className="circular-chart" >
          <path className="circle-bg"
            d="M18 2.0845
              a 15.9155 15.9155 0 0 1 0 31.831
              a 15.9155 15.9155 0 0 1 0 -31.831"
          />
          <path className="circle"
            strokeDasharray={score+", 100"}
            d="M18 2.0845
              a 15.9155 15.9155 0 0 1 0 31.831
              a 15.9155 15.9155 0 0 1 0 -31.831"
              style={{ stroke: score > 80 ? "#4CC790" : score > 60 ? "#ff9f00" : score <60  ? "#ed4141" : "" }}
          />
          <text x="18" y="22.25" className="percentage">{score}</text>
        </svg>  
        </div>
       
        <div className=" " style={{flex:'70', paddingTop: '.5em'}}>
          <h5>{props.name}</h5>
          <p style={{fontSize:'.75em', lineHeight:'1.2em'}}>{props.desc}</p>
        </div>

      </div>
    );
}

export default function Scores(props) {
  const results = props.results;
    
  let simScore = results.similarityScore;
  let structScore = results.structureScore;
  let gramScore = results.grammarScore;
  let conciseScore = results.concisenessScore;
  let readScore = results.readabilityScore;
  let identified = []
  let sentiment = '';
  let toneEmoji;

  switch(Object.keys(results.sentiment)[0]){
    case 'neu': 
      sentiment = 'Neutral';
      toneEmoji = <EmojiNeutral/>
      break;
    case 'pos':
      sentiment = 'Positive';
      toneEmoji = <EmojiSmile/>
      break;
    case 'neg':
      sentiment = 'Negative';
      toneEmoji = <EmojiFrown/>
      break;
  }

  results.topics.forEach((sent)=>{
    if(sent[1] !== ''){
      if(!identified.includes(sent[1])){
        identified.push(sent[1])
      }
    }
  })

  return (
    <div className="Scores " style={{ margin: "1em" }}>
      <Score
        name="Structure"
        score={structScore}
        desc={"How well you identified topics and structured your answer according to the specified format."}
      ></Score>
      <div style={{marginLeft:'1em'}}>
        <h6 className='d-inline'>Identified Topics:</h6> {identified.map((topic)=> <div className={'ReactTags__tag topic-badge '+ topic} style={{textTransform: 'capitalize'}}>{topic}</div>  )}
        <br></br>
        <h6 className='d-inline'>Missing Topics:</h6> {results.missing.map((topic)=>   <div className='ReactTags__tag text-white topic-badge' style={{textTransform: 'capitalize', fontWeight: 600, background:'#cdcdcd' }}>{topic}</div> )}
      </div>
      <br></br>


      <hr></hr>
      <Score
        name="Conciseness"
        score={conciseScore}
        desc={"Meaning, logic and connection of each phrase and sentence in answer."}
      ></Score>
      <hr></hr>
      <Score
        name="Grammar"
        score={gramScore}
        desc={"Structure, syntax and semantics."}
      ></Score>
      <hr></hr>
      <Score
        name="Similarity"
        score={simScore}
        desc={"Comparitive analysis of relationship of words between your answer and the professor's answer." }
      ></Score>
      <hr></hr>
      <div className="single-chart d-flex w-100 " >
        <div className='mx-auto d-flex' style={{width: '100%', height: '100px', flex: '25'}}>
          <h2 className='d-inline mx-auto'style={{position: 'relative', top: '.8em', right: '.35em', color: readScore.score > 80 ? "#ed4141" : readScore.score > 70 ? "#ff9f00" : readScore.score > 30  ? "#4CC790" : "#ed4141"}} >{readScore.score}</h2>
        </div>
       
        <div style={{flex:'70', paddingTop: '.5em'}}>
          <h5 className='d-inline'>Readability</h5>
            <OverlayTrigger overlay={<Tooltip id="tooltip-disabled">A measure of effective communication and clarity with your intended audience. How easy is your answer to read?</Tooltip>}>
              <span className="d-inline-block " style={{margin:".5em 1em", position: 'relative', bottom: '.1em'}}>
              <InfoCircle></InfoCircle>
              </span>
            </OverlayTrigger>
          <h6 style={{ fontWeight: 400, fontSize: '.9em'  }}>{readScore.suggestion}</h6>
        </div>

      </div>
     
      <hr></hr>
      
      <div className="single-chart d-flex w-100 " >
        <div className='mx-auto d-flex' style={{width: '100%', height: '50px', flex: '25'}}>
          <h2 className='d-inline mx-auto'style={{position: 'relative', top: '.4em', right: '.35em', color: sentiment === "Neutral" ? "#4CC790" : "#ff9f00" }} >{toneEmoji}</h2>
        </div>
       
        <div style={{flex:'70', paddingTop: '.5em'}}>
          <h5 className='d-inline'>Tone</h5>
            <OverlayTrigger overlay={<Tooltip id="tooltip-disabled">The overall sentiment of your text.</Tooltip>}>
              <span className="d-inline-block " style={{margin:".5em 1em", position: 'relative', bottom: '.1em'}}>
              <InfoCircle></InfoCircle>
              </span>
            </OverlayTrigger>
          <h6 style={{ fontWeight: 400, fontSize: '.9em' }}>{sentiment}</h6>
        </div>

      </div>
      
      <hr></hr>
      
      <br></br>
    </div>
  );
}


