import { EChart } from "./EChart.jsx";
import { readCssToken } from "@/shared/utils/cssTokens.js";

export function BarChart({ series }) {
  return <EChart className="bar-chart" option={createBarOption(series)} />;
}

function createBarOption(series) {
  const tooltipBg = readCssToken("--chart-tooltip-bg");
  const tooltipBorder = readCssToken("--chart-tooltip-border");
  const tooltipText = readCssToken("--chart-tooltip-text");
  const gridColor = readCssToken("--chart-grid");
  const danger = readCssToken("--chart-red");
  const warning = readCssToken("--chart-orange");

  return {
    animationDuration: 450,
    grid: { left: 8, right: 8, top: 16, bottom: 10, containLabel: false },
    tooltip: {
      trigger: "axis",
      backgroundColor: tooltipBg,
      borderColor: tooltipBorder,
      textStyle: { color: tooltipText }
    },
    xAxis: {
      type: "category",
      data: series.map((_, index) => index + 1),
      show: false
    },
    yAxis: {
      type: "value",
      show: false,
      splitLine: { show: true, lineStyle: { color: gridColor } }
    },
    series: [
      {
        name: "严重",
        type: "bar",
        data: series.map((value) => Math.max(1, Math.round(value * 0.45))),
        barWidth: 8,
        itemStyle: { color: danger, borderRadius: [4, 4, 0, 0] }
      },
      {
        name: "警告",
        type: "bar",
        data: series,
        barWidth: 8,
        itemStyle: { color: warning, borderRadius: [4, 4, 0, 0] }
      }
    ]
  };
}
