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 connects us to the API and fetches the json file with the mociones
    getMociones = 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 == "Error: No hay mocion con ese PIN."){
          alert("Error: No hay mocion con ese PIN.")
        } else {
          this.setState({ pincode: true});
        }
        
  
      } catch (error) {
        console.error(error);
      } 
      
    }
    

    
    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) => {

      this.getMociones(code);

    {/*
      if (code != 894761) { //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.getMociones}
              onBackspace={() => console.log('No more back.')}
              />
          </View>
          
          <View style={globalStyles.container}>
            { pincode && <Button title='Ir a mocion' color = {'#e81b39'} onPress={this.pressHandler} />}
          </View>

        </View>
      );
    }
  }