import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";
import faker from "faker";
import { FC, useContext } from "react";
import { AuthContext } from "../../../contexts/auth";
import { AuthContextType } from "../../..";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
  },
};

const ProfileChart = ({
  data,
}: {
  data: RecentJobsPosted[] | RecentJobsApplied [];
}) => {
  const today = new Date();
  const labels = Array.from({ length: 12 }, (_, i) =>
    new Date(today.getFullYear(), today.getMonth() - i).toLocaleString(
      "default",
      { month: "long" }
    )
  ).reverse();
  const { userRole } = useContext(AuthContext) as AuthContextType;
  console.log("data>>>>>>>>", data);
  const chartData = {
    labels,
    datasets: [
      {
        label: `${userRole === "Candidate" ? "Applications" : "Jobs"}`,
        data: data?.map((d) => d.count).reverse(),
        borderColor: "rgb(255, 99, 132)",
        backgroundColor: "rgba(255, 99, 132, 0.5)",
      },
    ],
  };
  console.log(userRole);
  return (
    <div className="tabs-box">
      <div className="widget-title">
        <h4>
          {userRole === "Candidate"
            ? "Your Submitted Applications"
            : "Your Posted Jobs"}
        </h4>
      </div>
      {/* End widget top bar */}

      <div className="widget-content">
        <Line options={options} data={chartData} />
      </div>
      {/* End  profile chart */}
    </div>
  );
};

export default ProfileChart;