import { HlList, HlLayerContainer, HlLayer } from 'react-transformer-qa-decode-visualize'
import 'react-transformer-qa-decode-visualize/dist/index.css'
import { useState } from 'react'
const axios = require('axios').default;
function App() {

  const [qa_data, set_qa_data] = useState([[]])
  const [question, set_question] = useState("What's my name?")
  const [context, set_context] = useState("My name is Clara and I live in Berkeley.")

  let request_qa_data = (e,_question=question,_context=context) => {
    const { REACT_APP_IN_DEV = 'false' } = process.env;
    let api_url = 'https://hf.space/embed/p208p2002/Transformer-QA-Decode-Visualize/question-answer'
    if (REACT_APP_IN_DEV === 'true') {
      api_url = 'http://127.0.0.1:7860/question-answer'
    }
    axios.post(api_url, {
      question:_question,
      context:_context
    })
      .then(function (response) {
        console.log(response.data)
        set_qa_data(response.data)
      })
  }

  return (
    <div style={{ width: 800, padding: 20 }}>

      <h4>Question</h4>
      <input
        style={{ width: 600 }}
        type="text"
        value={question}
        onChange={(e) => {
          set_question(e.target.value)
          request_qa_data(e,e.target.value)
        }}
      />
      <br />
      <h4>Context</h4>
      <textarea
        name=""
        id=""
        cols="80"
        rows="8"
        value={context}
        onChange={(e) => {
          set_context(e.target.value)
          set_qa_data([[]])
        }}
      />

      <br /><br />
      <button
        type="submit"
        onClick={request_qa_data}
      >Submit
      </button>

      <br />
      <hr />
      {
        qa_data.map((stride_qa_data, i) => {
          stride_qa_data = stride_qa_data.slice(0, 5)
          stride_qa_data = stride_qa_data.map((data) => {
            
            if (data.global_context_start === 0 && data.global_context_end === 0) {
              data.answer_span = "** NO_ANSWER **"
            }
            const answer_text = data.answer_span 
            data.answer_span = `logit:${data.start_logit.toFixed(2)},  ${data.end_logit.toFixed(2).padStart(4)} - ${answer_text}`
          
            return data
          })
          return (
            <div key={i}>
              <div>
                <h4>Transformer QA Model <small>(stride: {i + 1})</small></h4>
                <p>{question}</p>

                <HlList
                  data={{
                    result: stride_qa_data
                  }}
                  color='yellow' />
                <hr />
              </div>

              <h4>Context</h4>
              <HlLayerContainer
                context={context}>
                <HlLayer
                  data={{
                    result: stride_qa_data,
                    context: context
                  }}
                  color='yellow'
                />
                <HlLayer
                  data={{
                    result: stride_qa_data.slice(0, 1),
                    context: context
                  }}
                  color='orange'
                />
              </HlLayerContainer >
            </div>
          )
        })
      }


    </div>
  );
}

export default App;