---
// const { data } = Astro.props;

const data = [
    { name: "React", total: 10 },
    { name: "GraphQL", total: 5 },
    { name: "JavaScript", total: 5 },
    { name: "SVG", total: 1 },
    { name: "TypeScript", total: 5 },
];

const chartPadding = 100;
const chartSize = 400;
const chartCenter = chartSize / 2;

const chartData = data.sort((a, b) => b.total - a.total).slice(0, data.length);
const pointPadding = 0;
const max = chartData.reduce(
    (max, current) => (current.total > max ? current.total : max),
    0,
);
const rings = [...Array(6).keys()];

const getX = (angle: number, value: number) =>
    Math.cos(angle - Math.PI / 2) * value;
const getY = (angle: number, value: number) =>
    Math.sin(angle - Math.PI / 2) * value;

const axes = chartData.map((_, index) => {
    const angle = (Math.PI * 2 * index) / chartData.length;
    const x = getX(angle, chartSize / 2);
    const y = getY(angle, chartSize / 2);
    const points = [
        [0, 0],
        [x, y],
    ]
        .map((point) => point[0] + "," + point[1])
        .join(" ");
    return {
        points: points,
    };
});

const properties = chartData.map((item, index) => {
    const { name, total } = item;
    const clamp = Number(total / (max + pointPadding));
    const angle = (Math.PI * 2 * index) / chartData.length;
    const x = getX(angle, (clamp * chartSize) / 2);
    const y = getY(angle, (clamp * chartSize) / 2);
    return { name: name, total: total, x: x, y: y };
});

const shape =
    properties.reduce((items, item, index) => {
        const { x, y } = item;
        const string = `${index === 0 ? "M" : "L"}${x},${y}`;
        return items + string;
    }, "") + "z";

const bgColor = "bg-blue-500";
const borderColor = "border-gray-100";
const strokeColor = "stroke-gray-200";
const shapeClass = "stroke-gray-900 fill-gray-900/[0.5]";
---

<div class=`w-[25%] m-0 p-0 ${bgColor} border rounded ${borderColor} shadow-lg`>
    <div class="w-full grid md:grid-cols-1 items-center gap-16 p-0">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox={`-${chartPadding / 2} -${chartPadding / 2} ${chartSize + chartPadding} ${chartSize + chartPadding}`}
            role="presentation"
        >
            <g transform={`translate(${chartCenter},${chartCenter})`}>
                {
                    rings.map((_, index) => {
                        return (
                            <circle
                                cx={0}
                                cy={0}
                                r={
                                    ((index / rings.length) * chartSize) /
                                    Number((Math.PI / 2 + 0.1).toFixed(2))
                                }
                                class={strokeColor}
                                fill="none"
                                stroke-width={1}
                            />
                        );
                    })
                }
                {
                    axes.map((axis) => {
                        const { points } = axis;
                        return (
                            <polyline
                                points={points}
                                class={strokeColor}
                                fill="none"
                                stroke-width={1}
                            />
                        );
                    })
                }
                <path d={shape} class=`${shapeClass}` stroke-width={1.5}></path>
                {
                    properties.map((property, index) => {
                        const length = 1.1;
                        const angle = (Math.PI * 2) * index / chartData.length;
                        const maxX = getX(angle, (length * chartSize) / 2);
                        const maxY = getY(angle, (length * chartSize) / 2);
                        const textAngle = (angle * (180 / Math.PI))
                        return (
                            <g transform={`translate(${maxX},${maxY})`}>
                                <text
                                    x={0}
                                    y={0}
                                fill="#000000"
                                font-size="16px"
                                    text-anchor="middle"
                                    dominant-baseline="middle"
                                    transform=`rotate(${textAngle})`
                                >
                                    {property.name}
                                </text>
                            </g>
                        );
                    })
                }
            </g>
        </svg>
    </div>
</div>