import React from "react";
import { StyleSheet, View, Text, Button } from 'react-native';
import { globalStyles } from "../styles/global";
import SmoothPinCodeInput from 'react-native-smooth-pincode-input';




export default class App extends React.Component {
    
    pressHandler = () => {
    {/*Dentro del parentesis va el path al screen para redirigir*/}
      this.props.navigation.navigate('Mocion')
    }

    state = {
      code: '',
      pincode: false,
    };
    pinInput = React.createRef();
  
    _checkCode = (code) => {
      if (code != this.props.navigation.state.params.Pin) { //this is for recieving the parameters from another screen
        this.pinInput.current.shake()
          .then(() => this.setState({ code: '' }));
      } else {
        this.setState({ pincode: true});
      }
    }
  
    render() {
      const { code } = this.state;
      const { pincode } = this.state;
      return (
        <View style={globalStyles.container}>
          {/* Pin container */}
          <View style={globalStyles.section}>
            <Text style={globalStyles.titleText}>Entra el Pin de la mocion</Text>
            <SmoothPinCodeInput
              ref={this.pinInput}
              value={code}
              codeLength={6}
              onTextChange={code => this.setState({ code })}
              onFulfill={this._checkCode}
              onBackspace={() => console.log('No more back.')}
              />
          </View>
          
          <View style={globalStyles.container}>
            { pincode && <Button title='Ir a mocion' color = {'#e81b39'} onPress={this.pressHandler} />}
          </View>

        </View>
      );
    }
  }