import { ChartData, ChartOptions } from "chart.js";
import DataFormatter from "../../../data/data-formatter";

export const DAY_OF_THE_WEEK_LIST = ["월", "화", "수", "목", "금", "토", "일"];

// 이용 시간 차트
export const SERVICE_USAGE_STATUS_CHART_DATASETS_TEXT = {
  CHARGING_COUNT: {
    ID: "chargingCount",
    LABEL: "충전횟수",
    UNIT: "회",
  },
  SALES_AMOUNT: { ID: "salesAmount", LABEL: "매출액", UNIT: "원" },
};
export const SERVICE_USAGE_STATUS_CHART_INITIAL_VALUES: {
  data: ChartData<"bar" | "line", number[], string>;
  options: ChartOptions<"bar" | "line">;
} = {
  data: {
    datasets: [
      {
        label: SERVICE_USAGE_STATUS_CHART_DATASETS_TEXT.SALES_AMOUNT.LABEL,
        data: [],
        type: "line",
        order: 0,
        yAxisID: SERVICE_USAGE_STATUS_CHART_DATASETS_TEXT.SALES_AMOUNT.ID,
        backgroundColor: "#ff6252",
        pointStyle: false,
        borderWidth: 1.2,
        borderColor: "#ff6252",
      },
      {
        label: SERVICE_USAGE_STATUS_CHART_DATASETS_TEXT.CHARGING_COUNT.LABEL,
        data: [],
        order: 1,
        yAxisID: SERVICE_USAGE_STATUS_CHART_DATASETS_TEXT.CHARGING_COUNT.ID,
        maxBarThickness: 14,
        backgroundColor: "#00adff",
        borderRadius: 2,
      },
    ],
  },
  options: {
    interaction: {
      intersect: false,
      mode: "index",
    },
    responsive: true,
    maintainAspectRatio: false,
    aspectRatio: 2.2,
    plugins: {
      legend: {
        align: "end",
        labels: {
          boxHeight: 0.8,
          font: {
            family: "suit-medium",
          },
        },
      },
      tooltip: {
        callbacks: {
          label: (context) =>
            SERVICE_USAGE_STATUS_CHART_DATASETS_TEXT.CHARGING_COUNT.LABEL ===
            context.dataset.label
              ? `${
                  context.dataset.label
                }: ${DataFormatter.formatCommaValueNoUnit(context.parsed.y)}${
                  SERVICE_USAGE_STATUS_CHART_DATASETS_TEXT.CHARGING_COUNT.UNIT
                }`
              : `${
                  context.dataset.label
                }: ${DataFormatter.formatCommaValueNoUnit(context.parsed.y)}${
                  SERVICE_USAGE_STATUS_CHART_DATASETS_TEXT.SALES_AMOUNT.UNIT
                }`,
        },
        backgroundColor: "#02255a",
        displayColors: false,
        titleFont: {
          family: "suit-bold",
        },
        bodyFont: {
          family: "suit-medium",
        },
        padding: {
          x: 10,
          y: 8,
        },
        position: "nearest",
      },
    },
    scales: {
      x: {
        grid: {
          display: false,
        },
        ticks: {
          font: {
            family: "suit-medium",
          },
        },
      },
      salesAmount: {
        type: "linear",
        display: true,
        position: "right",
        grid: {
          drawOnChartArea: false, // only want the grid lines for one axis to show up
        },
        ticks: {
          font: {
            family: "suit-medium",
          },
        },
      },
      chargingCount: {
        type: "linear",
        display: true,
        position: "left",
        ticks: {
          font: {
            family: "suit-medium",
          },
        },
      },
    },
  },
};

// 인기시간대 차트
export const POPULAR_USAGE_TIME_CHART_COLORS = {
  DEFAULT: "#E0E8ED",
  MAX: "#00ADFF",
  MIN: "#FF6252",
};