import { Dimensions, View } from "react-native";
import { PieChart } from "react-native-chart-kit";
import { useTheme } from "../../app/contexts/ThemeContext";
import useFetch from "../../hooks/useFetch";

const Graph = () => {
    const {colors} = useTheme();

    const {data} = 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: []});
    const acctual_data = data.map(item => ({...item, legendFontColor: colors.primaryText, legendFontSize: 14}));
 
    return (
        <View style={{backgroundColor: colors.backgroundColor, borderRadius: 10, margin: 10}}>
        <PieChart
          data={acctual_data}
          width={Dimensions.get("window").width}
          height={240}
          chartConfig={{
            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          }}
          backgroundColor="transparent"
          accessor="total"
          paddingLeft="15"
          avoidFalseZero={true}
        />
        </View>
    );
}

export default Graph;