import { Box, Typography } from "@mui/material";
import { Bar } from "react-chartjs-2";

import { useRef, useEffect, useState } from "react";
import { SPACING } from "../../../../data/spacing";

export const BarChartSection = ({ boxStats }) => {
  const chartRef = useRef(null);
  const [gradient, setGradient] = useState([]);

  useEffect(() => {
    if (!chartRef.current) return;

    const chart = chartRef.current;
    const ctx = chart.ctx;
    const newGradient = [];

    const colors = [
      ["#FF6384", "#FF9FA8"],
      ["#36A2EB", "#7BC1FF"],
      ["#FFCE56", "#FFE39F"],
      ["#4BC0C0", "#8CDFDF"],
    ];

    for (let i = 0; i < 4; i++) {
      const grad = ctx.createLinearGradient(0, 0, 0, 300);
      grad.addColorStop(0, colors[i][0]);
      grad.addColorStop(1, colors[i][1]);
      newGradient.push(grad);
    }

    setGradient(newGradient);
  }, []);

  const barChartData = {
    labels: [
      "مانده انبار گوشت",
      "مانده انبار سردخانه",
      "کل وزن فروش به خارج استان",
      "کل وزن توزیع داخل استان",
    ],
    datasets: [
      {
        label: "وزن (کیلوگرم)",
        data: [
          boxStats?.warehouseKillHouse?.remainingChickenStock || 0,
          boxStats?.warehouseKillHouse?.remainingFreezingWeight || 0,
          boxStats?.warehouseKillHouse?.outProvinceAllocatedWeight || 0,
          boxStats?.warehouseKillHouse?.allocationWeight || 0,
        ],
        backgroundColor: gradient.length
          ? gradient
          : [
              "rgba(255, 99, 132, 0.7)",
              "rgba(54, 162, 235, 0.7)",
              "rgba(255, 206, 86, 0.7)",
              "rgba(75, 192, 192, 0.7)",
            ],
        borderRadius: 12,
        borderSkipped: false,
      },
    ],
  };

  const barChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        callbacks: {
          label: (context) => {
            return `${context.raw.toLocaleString()} کیلوگرم`;
          },
        },
      },
      datalabels: {
        display: false,
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          display: false,
        },
        grid: {
          display: false,
        },
      },
      x: {
        grid: {
          display: false,
        },
      },
    },
  };

  return (
    <Box
      sx={{
        flex: { xs: "1 1 100%", md: "1 1 25%" },
        minWidth: { xs: "100%", sm: 300 },
        borderRadius: 2,
        border: "1px solid",
        borderColor: "divider",
        justifyContent: "center",
        p: SPACING.MEDIUM,
        display: "flex",
        flexDirection: "column",
        boxSizing: "border-box",
        overflow: "hidden",
      }}
    >
      <Typography
        variant="h6"
        color="primary.main"
        sx={{ mb: 2 }}
        textAlign="left"
      >
        گزارش انبار کشتارگاه
      </Typography>
      <Box
        sx={{
          height: 300,
          width: "100%",
          mb: 2,
          position: "relative",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Bar
          ref={chartRef}
          data={barChartData}
          options={barChartOptions}
          style={{ height: "100%", width: "100%" }}
        />
      </Box>
    </Box>
  );
};