import {SecuritySummaryReportResultType} from "@/types/security-summary";
import {Label, Pie, PieChart, Sector} from "recharts";
import {PieSectorDataItem} from "recharts/types/polar/Pie";
import React from "react";

type ChartData = {
    name: string,
    value: number,
    fill: string
}
export default function VulnerabilityPieChart({
    vulnerabilityData, activeIndex
}: {
    vulnerabilityData: ChartData[],
    activeIndex: number
}) {
    return (
        <>
            <div className="mx-auto aspect-square w-full max-w-[400px]">
                <PieChart width={400} height={400}>
                    <Pie
                        data={vulnerabilityData}
                        dataKey="value"
                        nameKey="name"
                        cx="50%"
                        cy="50%"
                        innerRadius={60}
                        outerRadius={80}
                        activeIndex={activeIndex}
                        activeShape={({
                                          outerRadius = 0,
                                          ...props
                                      }: PieSectorDataItem) => (
                            <g>
                                <Sector {...props} outerRadius={outerRadius + 10}/>
                                <Sector
                                    {...props}
                                    outerRadius={outerRadius + 25}
                                    innerRadius={outerRadius + 12}
                                />
                            </g>
                        )}
                    >
                        <Label
                            content={({viewBox}) => {
                                if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                                    return (
                                        <text
                                            x={viewBox.cx}
                                            y={viewBox.cy}
                                            textAnchor="middle"
                                            dominantBaseline="middle"
                                        >
                                            <tspan
                                                x={viewBox.cx}
                                                y={viewBox.cy}
                                                className="fill-foreground text-3xl font-bold"
                                            >
                                                {vulnerabilityData[activeIndex].value}
                                            </tspan>
                                            <tspan
                                                x={viewBox.cx}
                                                y={(viewBox.cy || 0) + 24}
                                                className="fill-muted-foreground text-sm"
                                            >
                                                {vulnerabilityData[activeIndex].name}
                                            </tspan>
                                        </text>
                                    )
                                }
                            }}
                        />
                    </Pie>
                </PieChart>
            </div>
        </>
    )
}