import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Button, FlatList, Text, View } from 'react-native';

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  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=121071');
      const json = await response.json();
      setMocion(json.Mocion);
      setDescription(json.Description);
      setPIN(json.PIN);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }

  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 Token = 'abc123'
    const votos = value;

    const url = `http://10.190.1.140:5000/vote?PIN=${PIN}&Token=${Token}&votos=${votos}`;

    //connecting to API
    fetch(url)

    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 style={{ flex: 1, padding: 24 }}>
      <Text>{mocion}</Text>
      <Text>{description}</Text>
      
      {/* container for the look of the buttons */}
      <View>

      <Button title='A favor' onPress={() => sendVotes('A Favor')} />
      <Button title='En Contra'onPress={() => sendVotes('En Contra')} />
      <Button title='Abstenido/a' onPress={() => sendVotes('Abstenido/a')} />


      </View>

    </View>
  );
};