componentDidMount

import React, { Component, PropTypes } from 'react'
import { graphql, compose } from 'react-apollo'
import gql from 'graphql-tag'
import Auth0Lock from 'auth0-lock'
import { authClientId, authDomain } from './utils/constants'
import { withRouter, Redirect } from 'react-router'
import logo from './logo.svg'

import Button from 'grommet/components/Button'


class Login extends Component {
  constructor (props) {
    super(props)
    this._lock = new Auth0Lock(authClientId, authDomain, {
      theme: {
        logo,
        primaryColor: '#865cd6'
      },
      languageDictionary: {
        title: ‘asdfa'
      }
    })
  }

  static propTypes = {
    history: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    data: PropTypes.object.isRequired
  }

  componentDidMount() {
    this._lock.on('authenticated', authResult => {
      localStorage.setItem('id_token', authResult.idToken)

      this._lock.getUserInfo(authResult.accessToken, (err, profile) => {
        if (err) {
          // TODO: alert
        }

        console.log(profile);
        this.props.createUser({
          variables: {
            idToken: authResult.idToken,
            familyName: profile.family_name,
            givenName: profile.given_name,
            email: profile.email,
            picture: profile.picture
          }
        })
          .then(() => {
            this.props.history.push('/community')
          })
          .catch(err => {
            // TODO: alert
          })
      })
    })
  }

  _showLogin = () => {
    this._lock.show()
  }

  render() {
    if (this.props.data.user) {
      console.warn('not a new user or already logged in')
      return <Redirect to={{
        pathname: '/',
        state: { from: this.props.location }
      }} />
    }

    return (
      <Button label='Login' onClick={this._showLogin} />
    )
  }
}

const createUser = gql`
  mutation ($idToken: String!, $familyName: String!, $givenName: String!, $email: String!, $picture: String!) {
    createUser(authProvider: { auth0: { idToken: $idToken }}, familyName: $familyName, givenName: $givenName, email: $email, picture: $picture) {
      id
    }
  }
`

const userQuery = gql`
  query {
    user {
      id
    }
  }
`

export default compose(
  withRouter,
  graphql(createUser, { name: 'createUser' }),
  graphql(userQuery, { options: { fetchPolicy: 'network-only' }})
)(Login)