import React from 'react';
import { StyleSheet, Text, Image, Switch, TextInput, KeyboardAvoidingView, ScrollView, View, Button, Alert, InteractionManager } from 'react-native';
import logoImage from './images/deighton.png'
import { FormBinder } from 'react-form-binder'
import { api } from '../API'
import { BoundSwitch, BoundInput, BoundButton } from '../ui'
import { reactAutoBind } from 'auto-bind2'

export class Login extends React.Component {
  static navigatorStyle = {
    navBarHidden: true,
  }

  static bindings = {
    email: {
      alwaysGet: true,
      isValid: (r, v) => (v !== '')
    },
    password: {
      alwaysGet: true,
      isValid: (r, v) => (v !== '')
    },
    rememberMe: {
      alwaysGet: true,
      initValue: true,
      isValid: true
    },
    login: {
      noValue: true,
      isDisabled: (r) => (!(r.anyModified && r.allValid))
    }
  }

  static styles = StyleSheet.create({
    page: {
      minHeight: '50%',
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    logo: {
      width: '50%'
    },
    inputRow: {
      paddingTop: 10,
      width: '60%',
      flexDirection: 'column',
      justifyContent: 'flex-end',
      alignItems: 'flex-start',
    },
    switchRow: {
      paddingTop: 10,
      width: '60%',
      flexDirection: 'row',
      justifyContent: 'flex-end',
      alignItems: 'center'
    },
    buttonRow: {
      paddingTop: 10,
      width: '60%',
      flexDirection: 'row',
      justifyContent: 'flex-end',
      alignItems: 'center'
    }
  })

  constructor(props) {
    super(props)
    reactAutoBind(this)
    this.state = {
      binder: new FormBinder({}, Login.bindings)
    }
  }

  handleLogin() {
    let obj = this.state.binder.getModifiedFieldValues()
    let { navigator } = this.props

    if (obj) {
      api.login(obj.email, obj.password, obj.rememberMe).then((user) => {
        this.props.navigator.dismissAllModals()
      }).catch((error) => {
        this.props.navigator.dismissModal()
      })
    }
  }

  render() {
    return (
      <KeyboardAvoidingView style={Login.styles.page} behavior='padding'>
        <Image style={Login.styles.logo} source={logoImage} resizeMode='contain' />
        <View style={Login.styles.inputRow}>
          <BoundInput name='email' label='Email:' placeholder='name@xyz.com' message='Must enter a valid email' binder={this.state.binder} />
        </View>
        <View style={Login.styles.inputRow}>
          <BoundInput name='password' password label='Password:' message='Must supply a password' binder={this.state.binder} />
        </View>
        <View style={Login.styles.switchRow}>
          <BoundSwitch name='rememberMe' binder={this.state.binder} label='Remember Me'/>
        </View>
        <View style={Login.styles.buttonRow}>
          <BoundButton title='Login' name='login' width='40%' onPress={this.handleLogin} binder={this.state.binder} />
        </View>
      </KeyboardAvoidingView>
    )
  }
}