import React, { Component } from 'react'
import {
  View,
  Image
} from 'react-native'
import { connect } from 'react-redux'
import { NavigationActions, StackActions } from 'react-navigation'
import { all, not, identity } from 'ramda'


import { AUTH_TOKEN, CLIENT_SECRET } from '../../constants'

import DefaultIndicator from '../../components/DefaultIndicator'

import { inicializarDatos } from '../../redux/actions/inicio'

import css from './style'

const imgSrc = require('../../assets/logos/jaikuaamina.png')

const allAreFalse = all(not)
const allAreTrue = all(identity)

const goToMain = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'DrawerNavigator' })]
})

const goToUserDetails = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'DatosUsuarioNavigator' })]
})

class Splash extends Component {

  componentWillMount() {
    this.props.inicializarDatos(AUTH_TOKEN, CLIENT_SECRET)
  }


  render() {
    const falsies = [
      this.props.formatos.loading,
      this.props.soportes.loading,
      this.props.tipoRespuestas.loading,
      this.props.usuario.loading
    ]
    const truthy = [this.props.auth.authenticated]
    const ready = allAreFalse(falsies) && allAreTrue(truthy)
    const gotUser = this.props.usuario.guardado
    const nextScreen = (ready && gotUser) ? goToMain : goToUserDetails

    if (ready) {
      setImmediate(() => {
        this.props.navigation.dispatch(nextScreen)
      })
    }
    return (
      <View style={[css.pane]}>
        <View style={[css.imageContainer]}>
          <Image
            style={css.image}
            resizeMode='center'
            resizeMethod='resize'
            source={imgSrc}
          />
        </View>
        <DefaultIndicator />
      </View>
      )
    }
}

const mapStateToProps = (state) => ({
  auth: state.autenticacion,
  token: state.autenticacion.token,
  formatos: state.formatos,
  soportes: state.soportes,
  tipoRespuestas: state.tipoRespuestas,
  usuario: state.usuario,
})

const mapDispatchToProps = (dispatch) => ({
  inicializarDatos: (token, secret) => dispatch(inicializarDatos(token, secret)),
})

export default connect(mapStateToProps, mapDispatchToProps)(Splash)