import React from 'react';
import {
  StyleSheet,
  Text,
  Image,
  StatusBar
} from 'react-native';
import BaseScreen from '../BaseScreen';
import LinearGradient from 'react-native-linear-gradient';
import CardView from 'react-native-cardview';
import PinView from '../../components/PinView';
import PinKeyboard from '../../components/PinKeyboard';
import Utils from '../../utils/Utils';
import { connect } from 'react-redux';
import { register, uncheckClearPin } from '../../actions/RegThreeActions';

class RegThreeScreen extends BaseScreen {
  constructor(props) {
    super(props);
    this.add = this.add.bind(this);
    this.remove = this.remove.bind(this);

    this.state = {
      pinMessage: 'Сome up with a 5-digit pin',
      firstPin: '',
      error: ' '
    };
  }

  static navigationOptions = {
    header: false,
    gesturesEnabled: false
  };

  componentDidUpdate(prevProps) {
    if (this.props.clearPin !== prevProps.clearPin && this.props.clearPin) {
      this.pinView.clear();
      this.props.uncheckClearPin();
    }
  }

  async add(pin) {
    await this.pinView.add(pin);
    if (this.pinView.getPin().length === 5) {
      if (!this.state.firstPin) {
        this.state.firstPin = this.pinView.getPin();
        this.pinView.clear();
        this.setState({ pinMessage: 'Repeate pin', error: ' ' });
      } else {
        if (this.state.firstPin === this.pinView.getPin()) {
          this.props.register(this.state.firstPin, this.props.navigation.state.params.Code);
          this.setState({
            pinMessage: 'Сome up with a 5-digit pin',
            error: ' ',
            firstPin: ''
          });
        } else {
          this.pinView.clear();
          this.setState({
            pinMessage: 'Сome up with a 5-digit pin',
            firstPin: '',
            error: 'The passwords do not match, try again'
          });
        }
      }
    }
  }

  async remove() {
    await this.pinView.remove();
  }

  render() {
    return (
      <LinearGradient
        colors={['#00487b', '#007c94', '#21b0a0']}
        style={styles.container}
        start={{ x: 0.0, y: 1.0 }}
        end={{ x: 1.0, y: 0.0 }}
        onLayout={this.onLayout}
      >
        <StatusBar
          barStyle="light-content"
          backgroundColor="transparent"
          translucent={true}
        />
        <Image
          style={{
            width: Utils.percentHeight(11),
            height: Utils.percentHeight(13)
          }}
          source={require('../../../assets/drawable/logo_reg_3.png')}
        />
        <Text style={styles.welcome}>Registration in TopUp Africa</Text>

        <CardView style={[styles.card, Utils.isIphoneX && styles.cardIphoneX]} cardElevation={10} cornerRadius={16}>
          <Text style={styles.enterPin}>{this.state.pinMessage}</Text>
          <PinView loading={this.props.loading} style={styles.pinView} onRef={ref => (this.pinView = ref)} />
          <Text style={styles.errorText}>{this.state.error}</Text>
          <PinKeyboard
            style={styles.keyboard}
            add={this.add}
            remove={this.remove}
          />
        </CardView>
        <Text style={[styles.welcome, { fontSize: 12 }]}>
          In the future, the pin will be used to enter the application
        </Text>
      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#005491',
    paddingTop: Utils.percentHeight(5),
  },
  welcome: {
    fontSize: 14,
    textAlign: 'center',
    color: '#ffffff',
    backgroundColor: 'transparent',
    margin: Utils.percentHeight(3)
  },
  card: {
    height: Utils.percentHeight(66),
    width: Utils.percentWidth(90),
    alignSelf: 'center',
    backgroundColor: 'white',
  },
  cardIphoneX: {
    height: Utils.percentHeight(64),
  },
  enterPin: {
    fontSize: 12,
    textAlign: 'center',
    color: '#068696',
    marginTop: Utils.percentHeight(3),
    marginBottom: Utils.percentHeight(1)
  },
  errorText: {
    fontSize: 14,
    color: '#FFC107',
    textAlign: 'center',
    marginTop: Utils.percentHeight(1),
    marginBottom: Utils.percentHeight(1)
  },
  pinView: {
    margin: Utils.percentHeight(1),
  },
  keyboard: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
  }
});

const mapStateToProps = state => {
  return {
    loading: state.regThree.loading,
    clearPin: state.regThree.clearPin
  };
};

const mapDispatchToProps = dispatch => ({
  register: (pin, code) => dispatch(register(pin, code)),
  uncheckClearPin: () => dispatch(uncheckClearPin()),
});

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