import React, { Component } from 'react';
import {StyleSheet, Text, View} from 'react-native';
import { Actions, ActionConst } from 'react-native-router-flux'
import {Input, Button} from 'react-native-elements';
import {decode as atob, encode as btoa} from 'base-64'
import PropTypes from 'prop-types';
import { connect } from 'react-redux'

import { userActionCreators } from '../redux'
import Storage from '../api/Storage'

const mapStateToProps = (state) => ({
  isAuthenticating: state.user.isAuthenticating,
  token: state.user.token
})

class Login extends Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    isAuthenticating: PropTypes.bool,
    token: PropTypes.string
}

  constructor(props) {
    super(props)
    this.state = {
      user: '',
      password: ''
    };

    // console.log(userActionCreators);
    // console.log(this.state);
  }

  handleLogout = async () => {
    var headers = new Headers();
    headers.append("Authorization", "Basic " + btoa(this.user + ":" + this.password));
    headers.append("Accept", "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8,application/json");
    headers.append("Content-Type", "application/json");
    headers.append("Connection", "keep-alive");
    headers.append("Cache-Control", "no-cache");

    fetch('http://192.168.1.8:8080/higiena/logout', {
      method: 'GET',
      headers: headers,
      credentials: "include"
    }).then(function(response) {
      if (response.ok) {
        console.log("LOGOUT");
        console.log(response.headers);
        console.log(response.blob());
      }
    });
  }

  handleSignUp = async () => {
    var headers = new Headers();
    headers.append("Authorization", "Basic " + btoa(this.state.user + ":" + this.state.password));
    headers.append("Accept", "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8,application/json");
    headers.append("Content-Type", "application/json");
    headers.append("Connection", "keep-alive");
    headers.append("Cache-Control", "no-cache");

    console.log(this.props.isAuthenticating);
    console.log(this.props);
    console.log(userActionCreators.authenticationFailure);

    fetch('http://192.168.1.8:8080/higiena', {
      method: 'GET',
      headers: headers,
      credentials: "include"
    }).then(function(response) {
      if (response.ok) {
        let token = btoa(this.user + ":" + this.password)
        console.log("LOGIN success: " + token);
        this.props.dispatch(userActionCreators.authenticationSuccess(token))
      } else {
        var status = response.status
        console.log("LOGIN failed: " + status);
        this.props.dispatch(userActionCreators.authenticationFailure(status))
      }
    });

  }

  render() {
    return (<View style={styles.container}>
      <Text>Welcome to Higiena!</Text>
      <Input label="Email" leftIcon={{
          type: 'font-awesome',
          name: 'user'
        }} onChangeText={(value) => this.setState({user: value})
} placeholder="my@email.com"/>
      <Input label="Password" leftIcon={{
          type: 'font-awesome',
          name: 'lock'
        }} onChangeText={(value) => this.setState({password: value})
} placeholder="p@ssw0rd123" secureTextEntry />
      <Button buttonStyle={styles.button} title='Submit' onPress={this.handleSignUp}/>

      <Button buttonStyle={styles.button} title='Log Out' onPress={this.handleLogout}/>
    </View>);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  button: {
    marginTop: 10
  }
});

export default connect(mapStateToProps)(Login)