import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Button, FlatList, Text, View } from 'react-native';
import { CryptoJS } from "crypto-js/aes";
import { globalStyles } from '../styles/global';

export default App = ({ navigation }) => {
  const [mocion, setMocion] = useState(null);
  const [description, setDescription] = useState(null);
  const [pin, setPIN] = useState(null);
  const [response, setResponse] = useState(null);

  // this connects us to the API and fetches the json file with the mociones
  const getMociones = async () => {
     try {
      const response = await fetch(`http://10.190.1.140:5000/send?PIN=${navigation.state.params.Pin}`); // connection to the website 
      const json = await response.json();
      setMocion(json.Mocion);
      setDescription(json.Description);
      setPIN(json.PIN);
    } catch (error) {
      console.error(error);
    } 
    
  }

  useEffect(() => {
    getMociones();
  }, []);

  // this recieves the value of the button pressed and sends it to the api 
  const sendVotes = (value) => {
    console.log(value); // testing that we recied the value

    //sending to the API
    const PIN = pin;
    const message = 'buenos dias';
    const votos = value;

     // this is for encrypting the message
    var CryptoJS = require('crypto-js');
    const privKey = "Zr4u7x!z%C*F-JaN";

    const Token = CryptoJS.SHA256(message);
    const privKey_encrypt = CryptoJS.SHA256(privKey); 

    const url = `http://10.190.1.140:5000/vote?PIN=${PIN}&Token=${Token.toString()}&votos=${votos}&privKey_encrypt=${privKey_encrypt.toString()}`;

    //connecting to API
    fetch(url);

    alert("Su voto ha sido procesado!!")

    navigation.navigate('Pinpage'); // redirects back to PinPage

    console.log(response);
  };

  // here we want to display each mocion in a flatlist 
  // it's supposed to be like buttons. Once clicked it would let you vote inside
  return (
    <View>

      <View style={globalStyles.tittleText}>
        <Text style={{fontSize: 24}}>{mocion}</Text>
      </View>
      
      <View> 
        <Text style={globalStyles.paragraph}>{description}</Text>
      </View>
      
      {/* View container for the buttons style */}
      <View style={globalStyles.button}>
        <Button title='A favor' color={'#e81b39'} onPress={() => sendVotes('A Favor')}/>
      </View>

      <View style={globalStyles.button}>
        <Button title='En Contra' color={'#e81b39'} onPress={() => sendVotes('En Contra')} />
      </View>

      <View style={globalStyles.button}>
        <Button title='Abstenido/a' color={'#e81b39'} onPress={() => sendVotes('Abstenido/a')} />
      </View>
     
    </View>
  );
};