import styled from 'styled-components'
import gql from 'graphql-tag'
import { Query } from 'react-apollo'

class ProjectForm extends React.Component {
  state = {
    name: '',
    abbreviation: '',
    description: '',
  }

  toState = event => {
    this.setState({ [event.target.name]: event.target.value })
  }

  render() {
    return (
      <form>
        <h1>Project Setup</h1>
        <p>Please fill in the form.</p>
        <fieldset id='project-generic'>
          <label htmlFor='project-name'>Project name</label>
          <input type='text' id='project-name' placeholder='Project name' />
          <label htmlFor='project-abbreviation'>Project abbreviation</label>
          <input type='text' id='project-abbreviation' placeholder='Project abbreviation' />
          <label htmlFor='project-description'>Project description</label>
          <textarea id='project-description' placeholder='Project description' />
        </fieldset>
        <button type='submit' onClick={this.saveForm}>Save</button>
      </form>
    )
  }
}

export default ProjectForm