import { useEffect } from "react";
import { PieChart } from "react-native-chart-kit";
import useFetch from "../../hooks/useFetch";

const Graph = () => {

    const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.name AS name, c.color AS color, SUM(e.amount) as total FROM category c LEFT JOIN expense e ON e.category_guid = c.guid GROUP BY c.guid", args: []});

    useEffect(() => {
        console.log(data);
    }, [data])
 
    return (
        <PieChart
          data={data}
          width={333}
          height={333}
          chartConfig={{
            backgroundColor: '#e26a00',
            backgroundGradientFrom: '#fb8c00',
            backgroundGradientTo: '#ffa726',
            decimalPlaces: 2, // optional, defaults to 2dp
            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
            style: {
              borderRadius: 16
            }
          }}
          accessor="total"
          backgroundColor="red"
          paddingLeft="15"
          absolute
        />
    );
}

export default Graph;