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

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

class UserLogin extends React.Component {
  state = {
    email: '',
    password: ''
  }

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

  render() {
    return (
      <Mutation
        mutation={USER_LOGIN}
        variables={this.state}
        refetchQueries={[{ query: CURRENT_USER }]}
      >
        {(userLogin, { error, loading }) => (
          <form
            method="POST"
            onSubmit={async event => {
              event.preventDefault()
              await userLogin()
              this.setState({ email: '', password: '' })
            }}
          >
            <fieldset disabled={loading}>
              <h2>Log in</h2>
              <input type="email" name="email" id="email"
                placeholder="email"
                value={this.state.email}
                onChange={this.handleInput} />
              <label htmlFor="email"></label>
              <input type="password" name="password" id="password"
                placeholder="Password"
                value={this.state.password}
                onChange={this.handleInput} />
              <label htmlFor="password"></label>
              <button type="submit">Log in</button>
            </fieldset>
          </form>
        )}
      </Mutation>
    )
  }
}

export default UserLogin