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

function App() {
  useEffect(() => {getSurvey()},[]);

  const [responses,setResponses] = useState([]);
  
  function getSurvey() {
    const url = window.location.href;
    if(url.indexOf('#') > 0) {
      let parts = url.split('#');
      let id = parts[1];
      fetch("http://localhost:8085/responses?survey="+id).then(response=>response.json()).then(response=>{setResponses(response);});
    }
  }
  
  if(responses.length > 0)
    return (
      <div>
        <h3>Survey Responses</h3>
        {responses.map(r => {return(<Response response={r} />); })}
     </div>
    )
  else
      return (
        <div>
          <h3>No data</h3>
          <p>No data to display</p>
        </div>
      )
}

function Response({response}) {
  if(response.responses.length > 0) {
    return (
      <>
        <p>{response.prompt}</p>
        <ul>
        {response.responses.map(s => { return (<li>{s}</li>) }) }
        </ul>
      </>
    )
  } else {
    return (
      <>
        <p>{response.prompt}</p>
        <ul>
        {response.tallys.map(t => { return (<li>{t.choice}:{t.votes}</li>); }) }
        </ul>
      </>
    )
  }
}
export default App