import React from 'react';
import { View, Text, TextInput, Alert } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import styles from './Styles/LoginStyle';
import { loginRequest } from './../../../actions/UserAction';
import {
  Container,
  Content,
  Button,
  HeaderBig,
  Loader,
  Toast
} from './../../../components';
import i18n from './../../../i18n';
import { Colors, Images } from './../../../theme';

export interface Props {
  navigation: any;
  login: any;
  loading: any;
}

interface State {
  selected?: any;
  status?: boolean;
  email: any;
  password: any;
}
class LoginScreen extends React.Component<Props, State> {
  loginRefs: any = {};

  constructor(props: Props) {
    super(props);
    this.state = {
      email: '',
      password: ''
      // email: 'member@lms.com',
      // password: 'lms@12345'
    };
  }

  loginPress = () => {
    const { email, password } = this.state;
    const { login } = this.props;

    if (email.trim().length === 0) {
      Toast.errorBottom('Please enter valid email');
      return;
    }
    if (password.trim().length === 0) {
      Toast.errorBottom('Please enter valid password');
      return;
    }
    login(email, password);
  };

  validate = (value: any) => {
    let reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (reg.test(value) === false) {
       this.setState({ email: value });
      return false;
    } else {
      this.setState({ email: value });
    }
  };

  renderInput = (key: any, value: any) => {
    return (
      <View style={styles.txtInputView}>
        <Text style={styles.labelTxt}>{i18n.t(`login.${key}`)}</Text>
        <TextInput
          ref={(node: any) => {
            this.loginRefs[key] = node;
          }}
          key={key}
          keyboardType={key === 'email' ? 'email-address' : 'default'}
          autoCapitalize={'none'}
          style={styles.txtInput}
          placeholder={'Enter ' + i18n.t(`login.${key}`)}
          returnKeyType="next"
          secureTextEntry={key === 'password'}
          placeholderTextColor={Colors.borderGrey}
          value={value}
          onChangeText={val => {
            const obj: any = {};
            obj[key] = val;
            this.setState(obj);
          }}
          onSubmitEditing={() => {
            key === 'email' && this.loginRefs.password.focus();
          }}
        />
      </View>
    );
  };

  render() {
    const { email, password } = this.state;
    const { loading } = this.props;
    return (
      <>
        <Container transparentStatusBar safeAreaView={false}>
          <Content hasBigHeader>
            <HeaderBig
              sideRightImageSource={Images.boy}
              sideRightImageStyle={styles.boyImg}
            />

            <View style={styles.bottom}>
              <Text style={styles.welcomeTxt}>Welcome</Text>

              {this.renderInput('email', email)}
              {this.renderInput('password', password)}

              <TouchableOpacity
                onPress={() =>
                  this.props.navigation.navigate('ForgotPassword')
                }>
                <Text style={styles.forgoptPwdTxt}>Forgot Password?</Text>
              </TouchableOpacity>

              <Button
                title={'LOGIN'}
                style={styles.marginTop}
                long
                onPress={() => this.loginPress()}
              />
            </View>
            <View style={styles.bottomView}>
              <Text style={styles.bottomTipTxt}>Don't have an account?</Text>
              <TouchableOpacity
                onPress={() => this.props.navigation.navigate('Register')}>
                <Text style={styles.loginTipTxt}>Register</Text>
              </TouchableOpacity>
            </View>
          </Content>
        </Container>
        <Loader show={loading} />
      </>
    );
  }
}

function mapStateToProps({ user }: any) {
  return {
    user: user.profile,
    loading: user.loading
  };
}

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      login: loginRequest
    },
    dispatch
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);
