import React from 'react'
import {View, TouchableOpacity, Text} from 'react-native'
import {withRouter} from 'react-router-dom'
import {TextInput, Button} from '../components'
import {layout} from '../styles'
import { gql, graphql, compose } from 'react-apollo'

const createUserMutation = gql`
  mutation CreateUserMutation($name: String!, $email: String!, $password: String!) {
    createUser(
      name: $name,
      authProvider: {
        email: {
          email: $email,
          password: $password
        }
      }
    ) {
      id
    }

    signinUser(email: {
      email: $email,
      password: $password
    }) {
      token
      user {
        id
      }
    }
  }
`

const signinUserMutation = gql`
  mutation SigninUserMutation($email: String!, $password: String!) {
    signinUser(email: {
      email: $email,
      password: $password
    }) {
      token
      user {
        id
      }
    }
  }
`






@withRouter
export default compose(
  graphql(createUserMutation, {name:'createUserMutate'}),
  graphql(signinUserMutation,{name:'signinUserMutate'})
)(class extends React.Component{

  state={mode:'login', email:'', password:'', name:''}

  switchMode = () => {
    const {mode} = this.state
    this.setState({mode: mode==='login' ? 'signup':'login'})
  }

  confirm = async () => {
    const {name, email, password, mode} = this.state

    const { createUserMutate,
            signinUserMutate,
            history:{push}   } = this.props

    let result
    if (mode==='login'){
      result = await
        signinUserMutate({
          variables:{email, password}
        })

    } else{
      result = await
        createUserMutate({
          variables:{name, email, password}
        })
    }

    const {data:{signinUser:{user:{id},token}}} = result
    this.saveUserData(id, token)
    push('/new/1')
  }

  saveUserData = (userId, token) => {
    localStorage.setItem('userId', userId)
    localStorage.setItem('token', token)
  }

  buttonConfig = () =>{
    const {mode} = this.state
    return [
      {
        label: mode==='login' ? 'Login': 'Create An Account',
        onPress:this.confirm
      },{
        label: mode==='login'
          ? 'need to create an account?'
          : 'already have an account?',
        onPress: this.switchMode
      }
    ]
  }

  inputConfig = () =>{

  const {mode} = this.state

  return [
      {
        placeholder: 'name',
        onChangeText:t=>this.setState({name:t}),
        dontRender: mode==='login'
      },{
        placeholder:'email',
        onChangeText:t=>this.setState({email:t})
      },{
        placeholder:'password',
        secureTextEntry: true,
        onChangeText:t=>this.setState({password:t})
      },
    ]
  }


  render (){

    const {authed, history:{push}} = this.props
    const {mode, email, password, name} = this.state

    return <View>
        {this.inputConfig().map( ({dontRender,...p},i)=> !dontRender &&
        <TextInput key={i} {...p} /> )}
      <View style={layout.row} >
        {this.buttonConfig().map( (p,i) => <Button key={i} {...p} />)}
      </View>
    </View>

  }
})