import gql from 'graphql-tag'
import { Mutation } from 'react-apollo'
import { CURRENT_USER } from './User'

const USER_CREATE = gql`
  mutation USER_CREATE($email: String!, $name: String!, $abbreviation: String!, $password: String!) {
    createUser(email: $email, name: $name, abbreviation: $abbreviation, password: $password) {
      id
      name
      email
      abbreviation
    }
  }
`

class UserCreate extends React.Component {
  state = {
    name: '',
    email: '',
    abbreviation: '',
    password: ''
  }

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

  render() {
    return (
      <Mutation
        mutation={USER_CREATE}
        variables={this.state}
        refetchQueries={[{ query: CURRENT_USER }]}
      >
        {(userCreate, { error, loading }) => (
          <form
            method="POST"
            onSubmit={async event => {
              event.preventDefault()
              await userCreate()
              this.setState({ name: '', email: '', abbreviation: '', password: '' })
            }}
          >
            <fieldset>
              <label htmlFor="name">User name</label>
              <input type="text" name="name" id="name"
                placeholder="User name"
                value={this.state.name}
                onChange={this.handleInput} />
              <label htmlFor="abbreviation">Abbreviation</label>
              <input type="text" name="abbreviation" id="abbreviation"
                placeholder="Abbreviation"
                value={this.state.abbreviation}
                onChange={this.handleInput} />
              <label htmlFor="email">Email</label>
              <input type="email" name="email" id="email"
                placeholder="Email"
                value={this.state.email}
                onChange={this.handleInput} />
              <label htmlFor="password">Password</label>
              <input type="password" name="password" id="password"
                placeholder="Password"
                value={this.state.password}
                onChange={this.handleInput} />
              <button type="submit">Create</button>
            </fieldset>
          </form>
        )}
      </Mutation>
    )
  }
}

export default UserCreate