import { JSX } from "react";
import { Chart, useChart } from "@chakra-ui/charts";
import {
  CartesianGrid,
  Line,
  LineChart,
  Tooltip,
  XAxis,
  YAxis
} from "recharts";
import { LineChartArr } from "@/types/LineChartStats";

interface LineChartComponentProps {
  label: "Triggers" | "Links Deleted" | "Command Responses";
  data: LineChartArr;
}

const LineChartComponent = ({
  data,
  label
}: LineChartComponentProps): JSX.Element => {
  const chart = useChart({
    data: [...data],
    series: [{ name: label, color: "teal.500" }]
  });

  return (
    <Chart.Root maxH="xs" chart={chart} maxW="100dvw">
      <LineChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border")} vertical={false} />
        <XAxis
          axisLine={false}
          dataKey={chart.key("day")}
          stroke={chart.color("border")}
          label={{ value: "Date", position: "bottom" }}
        />
        <YAxis
          width="auto"
          axisLine={false}
          tickLine={false}
          tickMargin={10}
          stroke={chart.color("border")}
          // label={{ value: label, position: "left", angle: -90 }}
        />
        <Tooltip
          animationDuration={100}
          cursor={false}
          content={<Chart.Tooltip />}
        />
        {chart.series.map((item) => (
          <Line
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            stroke={chart.color(item.color)}
            strokeWidth={2}
            dot={false}
          />
        ))}
      </LineChart>
    </Chart.Root>
  );
};

export default LineChartComponent;