// Gauge chart options
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
    const colorRanges = isDarkMode
        ? [
            [60 / 160, '#49AA19'], // Dark Green
            [100 / 160, '#D89614'], // Dark Orange
            [1, '#D32029'],     // Dark Red
        ]
        : [
            [60 / 160, '#52C41A'], // Light Green
            [100 / 160, '#FAAD14'], // Light Orange
            [1, '#F5222D'],     // Light Red
        ];
    // Old color range
    // const gaugeColors = [
    //     [0, "#ed1c24"],
    //     [0.6, "#ed1c24"],
    //     [0.8, "#f7931e"],
    //     [1.0, "#009245"],
    // ];
    // const gaugeColors2 = [
    //     [0, "#009245"],
    //     [0.6, "#009245"],
    //     [0.8, "#f7931e"],
    //     [1.0, "#ed1c24"],
    // ];
    return {
        grid: {
            // top: '-10%',
            bottom: 0,
        },
        title: {},
        graphic: [
            {
                type: "circle",
                left: "center",
                top: "center",
                shape: {
                    r: backgroundRadius, // radius of the background circle
                },
                style: {
                    fill: isDarkMode ? "#141415" : "#F5F5F5", // Light grey color
                    opacity: 0.3, // Semi-transparent
                },
                z: 0, // make sure it's behind the gauge
            },
        ],

        series: [
            {
                type: "gauge",
                radius: "90%",
                startAngle: 225,
                endAngle: -45,
                min: min,
                max: max,
                splitNumber: 8,
                // progress: {
                //   show: true,
                //   width: 15,
                // },
                axisLine: {
                    lineStyle: {
                        width: 12,
                        // color: [
                        //     [0.375, "#3CB371"], // Green (0–60)
                        //     [0.5, "#FFD700"], // Yellow (60–80)
                        //     [0.625, "#FFA500"], // Orange (80–100)
                        //     [1, "#FF4500"], // Red (100–160)
                        // ],
                        color: colorRanges
                    },
                },
                axisTick: {
                    distance: -12,
                    length: 5,
                    lineStyle: {
                        color: "#000000",
                        width: 1,
                    },
                },
                splitLine: {
                    distance: -12,
                    length: 8,
                    lineStyle: {
                        color: "#000000",
                        width: 2,
                    },
                },
                axisLabel: {
                    color: isDarkMode ? "#fff" : "#333333",
                    distance: 23,
                    fontSize: 9,
                },
                pointer: {
                    show: true,
                    length: "70%",
                    width: 6,
                    itemStyle: {
                        color: "#FA8C16", // Set your desired pointer color here
                    },
                },
                title: {
                    show: false,
                    offsetCenter: [0, "40%"],
                    fontSize: 18,
                },
                detail: {
                    valueAnimation: true,
                    fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
                    fontFamily: "Oxanium, sans-serif", // or any custom font
                    fontSize: 30,
                    lineHeight: 25,
                    offsetCenter: [0, "60%"],
                    color: isDarkMode ? "#fff" : "#333333",
                    formatter: function (value) {
                        return `{valueStyle|${value}}\n{percentStyle|${unit}}`;
                    },
                    rich: {
                        // valueStyle: {
                        //   fontSize: 25,
                        //   fontWeight: "bold",
                        // },
                        percentStyle: {
                            fontSize: 10,
                            color: isDarkMode ? "#fff" : "#333333",
                            // fontWeight: "normal",
                        },
                    },
                },
                data: [
                    {
                        value: 16,
                        name: "에너지사용효율", // "Energy Usage Efficiency"
                    },
                ],
            },
        ],
    };
}