import '../../App.css';
import {useEffect,useState } from "react"


// Highlights topics in student/professor answer
// Underlines student grammar mistakes with red
export default function Answer(props) {

    const std_sentences = props.results.std_sentences;
    const prof_sentences = props.results.prof_sentences;
    let stdList = [];
    let found = false;

    function label_grammar(){
        let i = 0;
        let totalLength = 0;
        let container = document.getElementById('std_answer');
        const spans = container.getElementsByTagName('span')
    
        for(const key in props.results.grammar_results){
            let found = false;
            let totalLength = 0;
            let error = props.results.grammar_results[key]
            for (let i = 0; i < std_sentences.length; i++) {
                
                let span = spans.item(i)
                let str = span.textContent
                console.log(span)
                totalLength+=str.length
                console.log(totalLength)
                console.log(error.endLocation)
                if(error.startLocation > (totalLength - span.textContent.length) && error.endLocation < totalLength){
                    found = true;
                    var inner = str.slice(0, error.startLocation -totalLength-1) + "<span class = 'error'>"  + str.slice(error.startLocation - totalLength-1) + "</span>"
                    span.innerHTML = inner;
        
                }

            }
        }
    }

    useEffect (() =>{
        console.log(props);
        label_grammar();

    }, [])

          if(props.data === "Student"){
            props.results.topics.forEach(sent =>{
              if(sent[1] != ''){
                  stdList.push(<span className={sent[1] + ' std_sent'}>{sent[0]}</span>)
              }else{
                  stdList.push(<span className='std_sent'>{sent[0]}</span>)
              }
          })

          return (
              <div id="std_answer" className='vertical-space'>
                    {stdList}
              </div>
            );
      }
      else if(props.data === "Professor"){
          


          return (
              <div id="prof_answer" className='vertical-space'>
                    {prof_sentences.map((sent)=> (
                      <span className={sent[1]}>{sent[0]}</span>
                    ))}
              </div>
          );
      }
    
}

