import {
    create as createSVGElement,
} from "html/SVG.js";

export function circle(radius, data) {
    console.assert(typeof radius === "number", radius);
    console.assert(data);

    let size = (radius + 1) * 2;
    let center = size / 2;

    let svgElement = createSVGElement("svg");
    svgElement.classList.add("chart", "circle");
    svgElement.setAttribute("width", size);
    svgElement.setAttribute("height", size);
    svgElement.setAttribute("viewBox", `0 0 ${size} ${size}`);

    let backgroundElement = svgElement.appendChild(createSVGElement("circle"));
    backgroundElement.classList.add("background");
    backgroundElement.setAttribute("cx", center);
    backgroundElement.setAttribute("cy", center);
    backgroundElement.setAttribute("r", radius);

    let totalPercent = 0;

    for (let key in data) {
        let percent = data[key];
        console.assert(percent > 0 && percent <= 1, slice);

        let sliceElement;
        if (percent === 1) {
            sliceElement = createSVGElement("circle");
            sliceElement.setAttribute("cx", center);
            sliceElement.setAttribute("cy", center);
            sliceElement.setAttribute("r", radius);
        } else {
            const halfPi = Math.PI / 2;
            const twoPi = Math.PI * 2;

            let a1 = (totalPercent * twoPi) - halfPi;
            let a2 = (percent * twoPi) - halfPi;

            let largeArcFlag = (a2 - a1) > Math.PI ? 1 : 0;

            let x1 = center + Math.cos(a1) * radius;
            let y1 = center + Math.sin(a1) * radius;

            let x2 = center + Math.cos(a2) * radius;
            let y2 = center + Math.sin(a2) * radius;

            sliceElement = createSVGElement("path");
            sliceElement.setAttribute("d", [
                "M", x1, y1,
                "A", radius, radius, 0, largeArcFlag, 1, x2, y2,
                "L", center, center,
                "Z"
            ].join(" "));
        }

        sliceElement.classList.add("slice", CSS.escape(key));
        svgElement.appendChild(sliceElement);

        totalPercent += percent;
        console.assert(totalPercent <= 1, totalPercent, percent);
    }

    return svgElement;
};