text: import React, {useState, useEffect} from 'react'
  import { Link } from 'gatsby'
  
  import Radio from '@material-ui/core/Radio';
  import Checkbox from '@material-ui/core/Checkbox';
  
  import RadioGroup from '@material-ui/core/RadioGroup';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import FormControl from '@material-ui/core/FormControl';
  import FormLabel from '@material-ui/core/FormLabel';
  import TextField from '@material-ui/core/TextField';
  
  import InputLabel from '@material-ui/core/InputLabel';
  import Select from '@material-ui/core/Select';
  import Button from '@material-ui/core/Button';
  
  
  import Amplify, { API } from 'aws-amplify';
  import * as queries from '../graphql/queries';
  import awsconfig from '../aws-exports';
  Amplify.configure(awsconfig);
  
  
  const Survey = ({surveyID}) => {
  
      const [value, setValue] = React.useState('female');
      const [survey, setSurvey] = useState({name: 'Loading...', questions: {items:[]}});
  
      const handleChange = (event) => {
        setValue(event.target.value);
      };
  
      const onSubmit = () => {
  
      }
  
      useEffect( () => {
          API.graphql({ query: queries.getSurvey, variables: { id: surveyID }}).then(({data}) => {
              console.log(data.getSurvey);
              setSurvey(data.getSurvey);
          })
  
      }, [surveyID]);
      // const questions = survey.questions;
      return (
      <div>
          <div>
              <h1>{survey.name.length > 0 ? survey.name : 'Untitled Survey'}</h1>
              {/* <FormControl component="fieldset"> */}
              {survey.questions.items.map((question, i) => (
                  <div key={question.id}>
                      <div className='draggable-item question-block'>
                          <div className='question-header'>
                              <FormLabel component="legend">{question.name}</FormLabel>
                              <span className='grow'/>
                          </div>
                          
                          {question.type === 'text' &&
                              <TextField
                              id="outlined-full-width"
                              placeholder="Enter your answer here"
                              fullWidth
                              margin="normal"
                              InputLabelProps={{
                                  shrink: true,
                              }}
                              variant="outlined"
                              />
                          }
                          {(question.type === 'radio' || question.type === 'checkbox' && question.choices) &&
                          <FormControl component="fieldset">
                              
                              <RadioGroup aria-label="gender" name="gender1">
                                  {question.choices.items.filter(a=>a.name && a.name.length > 0).map(choice => (
                                      <FormControlLabel value={choice.name} control={question.type === 'checkbox' ? <Checkbox /> : <Radio />} label={choice.name} />
                                  ))}
                              </RadioGroup>
                          </FormControl>
                        }
                      </div>
                  </div>
              ))}
              <div className='button-container'>
              <Button variant='contained' color='primary' onClick={onSubmit}>Submit</Button>
              </div>
          </div>
  	</div>
  )
  }
  export default Survey