import React from "react";
import {
    PieChart as PC,
    Pie,
    Legend,
    Tooltip,
    ResponsiveContainer,
    Cell,
} from "recharts";
import { ChartProps } from "../types";

const colors = ["#82ca9d", "#8884d8"];

export default function PieChart(props: ChartProps) {
    return (
        <ResponsiveContainer height={300}>
            <PC width={600} height={300}>
                <Pie
                    dataKey="value"
                    data={Object.keys(
                        props.data[props.data.length - 1].values
                    ).map((k) => ({
                        name: k,
                        value: props.data[props.data.length - 1].values[k],
                    }))}
                    innerRadius={40}
                    outerRadius={80}
                    fill="#82ca9d"
                    label
                >
                    {Object.keys(props.data[props.data.length - 1].values)
                        .map((k) => ({
                            name: k,
                            value: props.data[props.data.length - 1].values[k],
                        }))
                        .map((entry, index) => (
                            <Cell
                                key={`cell-${index}`}
                                fill={colors[index % colors.length]}
                            />
                        ))}
                </Pie>
                <Tooltip />
                <Legend />
            </PC>
        </ResponsiveContainer>
    );
}