import type { ChartData, ChartOptions } from "chart.js";
import { getCssVariableValue } from "@common/components";
import type { BoardStatistics } from "./board-statistics-interface";

export const chartData = {
  day: (
    data: BoardStatistics,
  ): {
    data: ChartData<"line">;
    options: ChartOptions<"line">;
  } => {
    return {
      data: {
        labels: data.bbsDailyList.map((item) => item.dayYmd),
        datasets: [
          {
            type: "line",
            label: "신규게시물",
            data: data.bbsDailyList.map((item) => item.pstNewCnt),
            borderColor: getCssVariableValue("--chart-1"),
            backgroundColor: "rgba(59, 130, 246, 0.1)",
            tension: 0.4,
          },
          {
            type: "line",
            label: "댓글수",
            data: data.bbsDailyList.map((item) => item.pstCmntCnt),
            borderColor: getCssVariableValue("--chart-2"),
            backgroundColor: "rgba(236, 72, 153, 0.1)",
            tension: 0.4,
          },
          {
            type: "line",
            label: "조회수",
            data: data.bbsDailyList.map((item) => item.pstInqCnt),
            borderColor: getCssVariableValue("--chart-3"),
            backgroundColor: "rgba(168, 85, 247, 0.1)",
            tension: 0.4,
          },
        ],
      },
      options: {
        maintainAspectRatio: false,
        responsive: true,
        plugins: {
          legend: {
            position: "bottom",
          },
        },
        scales: {
          y: {
            ticks: {
              precision: 0,
            },
          },
        },
      },
    };
  },

  board: (
    data: BoardStatistics,
  ): {
    data: ChartData<"bar">;
    options: ChartOptions<"bar">;
  } => {
    return {
      data: {
        labels: data.bbsPstCntList.map((item) => item.bbsNm),
        datasets: [
          {
            type: "bar",
            label: "게시판별 분포",
            data: data.bbsPstCntList.map((item) => item.pstCnt),
            backgroundColor: data.bbsPstCntList.map((_, index) =>
              getCssVariableValue(`--chart-${(index % 5) + 1}`),
            ),
          },
        ],
      },
      options: {
        maintainAspectRatio: false,
        indexAxis: "y",
        scales: {
          x: {
            ticks: {
              precision: 0,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
        },
      },
    };
  },

  status: (
    data: BoardStatistics,
  ): {
    data: ChartData<"doughnut">;
    options: ChartOptions<"doughnut">;
  } => {
    return {
      data: {
        labels: data.pstAnsList.map((item) => item.answerNm),
        datasets: [
          {
            type: "doughnut",
            data: data.pstAnsList.map((item) => item.ansCnt),
            backgroundColor: data.pstAnsList.map((_, index) =>
              getCssVariableValue(`--chart-${(index % 5) + 1}`),
            ),
          },
        ],
      },
      options: {
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: "bottom",
          },
        },
      },
    };
  },
};