// components/RecipeChart.js
import React from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";

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

const CoffeeBrewChart = ({ data }) => {
  const chartData = {
    labels: data?.map((entry) =>
      new Date(entry?.logAt).toLocaleDateString("fa-IR", {
        month: "numeric",
        day: "numeric",
      })
    ), // X-axis labels
    datasets: [
      {
        label: "Ratio",
        data: data?.map((entry) => entry?.ratio),
        borderColor: "rgba(75, 192, 192, 1)",
        backgroundColor: "rgba(75, 192, 192, 0.2)",
        fill: false,
      },
      {
        label: "Extraction Time",
        data: data?.map((entry) => entry?.extractionTime),
        borderColor: "rgba(153, 102, 255, 1)",
        backgroundColor: "rgba(153, 102, 255, 0.2)",
        fill: false,
      },
      {
        label: "Final Yield",
        data: data?.map((entry) => entry?.finalYield),
        borderColor: "rgba(255, 159, 64, 1)",
        backgroundColor: "rgba(255, 159, 64, 0.2)",
        fill: false,
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false, // Disable aspect ratio to allow custom sizing
    plugins: {
      legend: {
        display: false, // Hide the legend
      },
      title: {
        display: false, // Hide the title
      },
    },
    scales: {
      x: {
        title: {
          display: false,
          text: "Date",
          font: {
            size: 16,
            family: "KalamehWeb", // Customize font family if needed
            style: "normal",
          },
        },
        ticks: {
          font: {
            size: 12,
            family: "KalamehWeb", // Customize font family if needed
            style: "normal",
          },
        },
      },
      y: {
        title: {
          display: false, // Hide the y-axis title
        },
        ticks: {
          font: {
            size: 12,
            family: "Arial", // Customize font family if needed
            style: "normal",
          },
        },
      },
    },
  };

  return (
    <div style={{ height: "200px", overflowX: "auto" }}>
      <div style={{ height: "200px" }}>
        <Line data={chartData} options={options} />
      </div>
    </div>
  );
};

export default CoffeeBrewChart;