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

export interface Props {
  navigation: any;
  resetPassword: any;
  loading: any;
}
interface State {
  newPassword: any;
  confirmPassword: any;
}
class ResetPassScreen extends React.Component<Props, State> {
  passwordRef: any;
  constructor(props: Props) {
    super(props);
    this.state = {
      newPassword: '',
      confirmPassword: ''
    };
  }

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

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

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

  resetBtn = () => {
    const { newPassword, confirmPassword } = this.state;
    const { resetPassword } = this.props;

    if (newPassword.trim().length === 0) {
      Toast.errorBottom('Please enter password');
      return;
    }
    if (newPassword.trim().length <= 6) {
      Toast.errorBottom('password should be at least 6 characters');
      return;
    }
    if (confirmPassword.trim().length === 0) {
      Toast.errorBottom('Please enter confirm password');
      return;
    }
    if (newPassword !== confirmPassword) {
      Toast.errorBottom('Please enter valid phone');
      return;
    }
    let params = {
      token: '',
      password: newPassword
    };
    resetPassword(params);
  };

  renderInput = (key: any, value: any) => {
    return (
      <View style={styles.txtInputView}>
        <Text style={styles.labelTxt}>{i18n.t(`resetPassword.${key}`)}</Text>
        <TextInput
          key={key}
          style={styles.txtInput}
          placeholder={'Enter ' + i18n.t(`resetPassword.${key}`)}
          returnKeyType={key === 'newPassword' ? 'next' : 'done'}
          secureTextEntry={true}
          placeholderTextColor={Colors.borderGrey}
          value={value}
          onChangeText={val => {
            const obj: any = {};
            obj[key] = val;
            this.setState(obj);
          }}
          onSubmitEditing={() => {}}
        />
      </View>
    );
  };

  render() {
    const { newPassword, confirmPassword } = this.state;
    const { loading } = this.props;
    return (
      <>
        <Container transparentStatusBar safeAreaView={false}>
          <Content hasBigHeader>
            <HeaderBig
              hasBackBtn
              isWhiteBackBtn
              sideRightImageSource={Images.key}
              sideRightImageStyle={styles.key}
            />

            <Text style={styles.resetPwdTxt}>Reset Password</Text>
            <Text style={styles.tipTxt}>
              {'Please Choose Your New\nPassword'}
            </Text>

            {this.renderInput('newPassword', newPassword)}
            {this.renderInput('confirmPassword', confirmPassword)}

            <Button
              title={'SAVE NEW PASSWORD'}
              long
              style={styles.marginTop}
              onPress={() => {}}
            />
          </Content>
        </Container>
        <Loader show={loading} />
      </>
    );
  }
}
function mapStateToProps({ user }: any) {
  return {
    loading: user.loading
  };
}

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      resetPassword: resetPasswordRequest
    },
    dispatch
  );
}

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