import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Keyboard

} from "react-native";
import BahanaIcon from '../../components/BahanaIcon'
import FormLogin from '../../components/FormLogin'
import GreenLogin from '../../components/GreenLogin'
import LinearGradient from "react-native-linear-gradient"
import {connect} from 'react-redux'

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      user: '',
      password: '',
      datas: '',
      userZ: '',
      userV: '',
      redux : "2"
    };
    this.socket = new WebSocket('wss://bahana.co.id:12000/');
  }

  successLogin = () => {
    this.props.login();
    this.props.navigation.navigate('CobaRedux');
  }


  componentDidUpdate(prevProps, prevState){
    if (this.state.userZ !== prevState.userZ){
      this.successLogin();
      // return this.props.navigation.navigate('CobaRedux', {
      //     user: this.state.user,
      //     password: this.state.password,
      //   });
    }
  }

  componentDidMount() {
    // 1. pertama kita apakah koneksi telah tersambung.(pakai this.socket.onopen)
    // Tanda koneksi telah dibuka
    this.socket.onopen = () => console.log('Koneksi Telah Dibuka');

    // 3.Aksi untuk mengetahui respon yang akan dilakukan setelah onSend

    this.socket.onmessage = ({data}) => {
      let obj = JSON.parse(data);
      this.setState({datas: obj});

      //Pengondisian untuk berhasil login
      if (obj.action_type === 'REPLY-DB' && obj.sub_type === "USER_PROFILE"){
        this.setState({userZ : this.state.user})
        console.log('berhasil')
      }if (obj.action_type === 'LOGIN-RESPONSE' && obj.status === 'OK') {


      }
       else if (obj.action_type === 'LOGIN-RESPONSE' && obj.status !== 'OK') {
        console.log(this.state.datas.status)
      }
    };

    //Aksi jika koneksi error atau pun Ditutup
    this.socket.onerror = () => {
      console.log('Koneksi Error');
    };
    this.socket.onclose = () => {
      console.log('koneksi ditutup');
    };
  }

  render() {
    // 2. kita kirim user and password ke server(dengan this.socket.send)
    //fungsi untuk merequets LOGIN via ws
    const sendAuth = () => {
      Keyboard.dismiss();
      this.socket.send(
        JSON.stringify({user: this.state.user, password: this.state.password}),
      );
    };

    return (
     <LinearGradient colors={['#10101F',  '#2D3152']} style={styles.container}>

        {/* Komponen untuk Simbol Bahana */}
        <BahanaIcon />
        <View>
          {/* Form Username */}
          <FormLogin
            icon="account-circle"
            placeholder="Username"
            security= {false}
            onChangeText={user => this.setState({user})}
          />

          {/* Form Password  */}
          <FormLogin
            icon="lock"
            placeholder="Password"
            security={true}
            onChangeText={password => this.setState({password})}
          />

          {/* Lupa Password Aksi */}
          <View style={styles.forgotPassword}>
            <Text style={{color: 'white'}}>Forgot your Password?</Text>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('ForgotPass')}>
              <Text style={{color: '#0b3f91'}}> Click here</Text>
            </TouchableOpacity>
          </View>
        </View>

        <View>
          {/* Login Aksi */}
          <GreenLogin onPress={() => sendAuth()} title="Login" />

          {/* Disclaimer Aksi */}
          <TouchableOpacity
            style={{justifyContent: 'center', alignItems: 'center'}}
            onPress={() => this.props.navigation.navigate('Disclaimer')}>
            <Text style={styles.Disclaimer}>Disclaimer</Text>
          </TouchableOpacity>
        </View>
        {/* Alert Gagal Login Aksi */}
        <View
          style={[
            styles.warningAlert,
            this.state.datas.status === "FAILED"
              ? styles.alertShow
              : styles.alertNone,
          ]}>
          <Text
            style={{color: 'white', fontWeight: '300', textAlign: 'center'}}>
            The username or password did not match our records.Please try again
          </Text>
        </View>

        {/* SignUp Aksi */}
        <View style={styles.signUp}>
          <Text style={{color: 'white'}}>New to BIPS? </Text>
          <TouchableOpacity onPress={() => alert('belum ditentukan')}>
            <Text style={{color: '#0b3f91'}}>Sign Up</Text>
          </TouchableOpacity>
        </View>

    </LinearGradient>
    );
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Login);

// var newUser2 = this.state.userZ
var newAction2 = function ({this.state.userZ}) {
  return {
      type: 'login',
      newUser: newUser2
  }
}


function mapStateToProps(state){
    return{
        user : state.user
    }
}

function mapDispatchToProps(dispatch){
  return{
    login : () => dispatch(newAction2())
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

    padding: 5,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  forgotPassword: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  Disclaimer: {
    color: '#0b3f91',
  },
  signUp: {
    flexDirection: 'row',
  },
  warningAlert: {
    display: 'none',
    backgroundColor: 'red',
    height: 50,
    width: '80%',
    justifyContent: 'center',
  },
  alertShow: {
    display: 'flex',
  },
  alertNone: {
    display: 'none',
  },
});