import React from 'react';
import { View, Text, TextInput, BackHandler } from 'react-native';
import styles from './Styles/ForgotPasswordStyle';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { forgotPasswordRequest } from './../../../actions/UserAction';
import {
  Container,
  Content,
  HeaderBig,
  Button,
  Toast,
  Loader
} from './../../../components';
import i18n from './../../../i18n';
import { Images } from './../../../theme';
import { Colors } from './../../../theme';
import { validateEmail } from './../../../libs/Utils';

export interface Props {
  navigation: any;
  forgotPassword: any;
  loading: any;
}
interface State {
  email: any;
}
class ForgotPassScreen extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      email: ''
    };
  }

  componentDidMount = () => {
    BackHandler.addEventListener('hardwareBackPress', this.backHandler);
  };

  componentWillUnmount = () => {
    BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
  };

  backHandler = () => {
    const { navigation } = this.props;
    return navigation.goBack();
  };

  forgotPasswordBtnPress = () => {
    const { email } = this.state;
    const { forgotPassword } = this.props;

    let emailRes = validateEmail(this.state.email);
    if (!emailRes.success) {
      Toast.errorBottom(emailRes.message);
      return false;
    }
    let params = {
      email,
      url: ''
    };
    forgotPassword(params);
  };

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

  render() {
    const { email } = this.state;
    const { navigation, loading } = this.props;
    return (
      <>
        <Container transparentStatusBar safeAreaView={false}>
          <Content hasBigHeader>
            <HeaderBig
              hasBackBtn
              isWhiteBackBtn
              navigation={navigation}
              sideRightImageStyle={styles.lockImg}
              sideRightImageSource={Images.lock}
            />
           <View style={styles.bottom}>
            <Text style={styles.forgotPasswordTxt}>Forgot Password ?</Text>
            <Text style={styles.tipTxt}>
              {'Enter Your Emai Address Here to\nReceive Further Instructions.'}
            </Text>
            {this.renderInput('email', email)}
            <Button
              long
              style={styles.marginTop}
              title={'SEND'}
              onPress={() => this.forgotPasswordBtnPress()}
            />
            </View>
          </Content>
        </Container>
        <Loader show={loading} />
      </>
    );
  }
}
function mapStateToProps({ user }: any) {
  return {
    loading: user.loading
  };
}

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      forgotPassword: forgotPasswordRequest
    },
    dispatch
  );
}

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