import { useState, useEffect } from 'react'
import { Radio, RadioGroup } from '@sajari/react-components';
import './App.css'

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

  const [questions,setQuestions] = useState([]);
  const [survey,setSurvey] = useState();

  function getSurvey() {
    const url = window.location.href;
    if(url.indexOf('#') > 0) {
      let parts = url.split('#');
      let id = parts[1];
      fetch("http://localhost:8085/surveys?id="+id).then(response=>response.json()).then(response=>{setSurvey(response);getQuestions(id);});
    }
  }
  function getQuestions(id) {
    fetch("http://localhost:8085/questions?survey="+id).then(response=>response.json()).then(response=>setQuestions(response));
  }

  function uploadAnswers() {
      questions.map(q => uploadResponse(q));
      alert("Your answers have been recorded.")
  }
  function uploadResponse(q) {
    let response = {survey:q.survey,question:q.idquestion,response:q.response};
    fetch('http://localhost:8085/responses', {
      method: 'POST',
      body: JSON.stringify(response),
      headers: {
        'Content-type': 'application/json; charset=UTF-8'
      }
    });
  }
  

  if(survey)
    return (
      <div>
        <h3>{survey.title}</h3>
        <p>{survey.prompt}</p>
        {questions.map((q,i) => {return(<Question key={i} question={q} />); })}
        <button onClick={uploadAnswers}>Submit Answers</button>
      </div>
    )
  else
      return (
        <div>
          <h3>No survey</h3>
          <p>No survey to display</p>
        </div>
      )
}

function Question({question}) {
  let handleChange = (e) => {question.response = e.target.value;};

  if(question.responses=='') {
    return (
      <div>
        <p>{question.question}</p>
        <input type="text" onChange={handleChange} />
      </div>
    )
  } else {
    const options = question.responses.split(',');
    return (
      <div>
        <p>{question.question}</p>
        <RadioGroup inline defaultValue={options[0]} onChange={handleChange}>
        {options.map((o) => {return(<Radio key={o} value={o}>{o}</Radio>)})}
        </RadioGroup>
      </div>
    )
  }
}

export default App