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';
import { useEffect, useState } from "react";



export default class App extends React.Component {

  
    // this checks the pin the user inputs to see if there is a mocion with that pin
    getPin = async (code) => {
       try {
        const response = await fetch(`http://10.0.0.65:5000/send?PIN=${code}`); // connection to the website 
        const json = await response.json();
        console.log(json);

        // checks if the mocion exists
        if (JSON.stringify(json) == '{"Error":"No hay mocion con ese PIN."}' ){
          alert("Error: No hay mocion con ese PIN.")
          this.pinInput.current.shake()
          .then(() => this.setState({ code: '' }));

        } else {
          this.setState({ pincode: true});
        }
        
  
      } catch (error) {
        console.error(error);
      } 
      
    }
    
    
    pressHandler = (code) => {
    {/*Dentro del parentesis va el path al screen para redirigir*/}
      this.props.navigation.navigate('Mocion', {Pin:code})
      this.setState({ pincode: false});
      this.setState({ code: '' })
    }

    state = {
      code: '',
      pincode: false,
    };

    pinInput = React.createRef();
  
    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.getPin}
              onBackspace={() => console.log('No more back.')}
              />
          </View>
          
          <View style={globalStyles.container}>
            { pincode && this.pressHandler(code)} 
          </View>

        </View>
      );
    }
  }