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

const StyledProjectForm = styled.form`
  display: grid;
  font-family: "Arial";

  label {
    display: block;
    color: ${props => props.theme.grey};
    font-weight: bold;
    font-size: 80%;
  }

  input, textarea {
    border: none;
    border-bottom: 2px solid red;
  }

  #project-name {
    font-size: 115%;
    font-weight: bold;
  }
`

class ProjectForm extends React.Component {
  saveForm = event => {
    event.preventDefault()
    console.log(event.target)
  }

  render() {
    return (
      <StyledProjectForm>
        <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>
      </StyledProjectForm>
    )
  }
}

export default ProjectForm