import { Box, Typography } from "@mui/material";
import { formatJustDate } from "../../../../utils/formatTime";
import { Line } from "react-chartjs-2";
import { Grid } from "../../../../components/grid/Grid";

export const PriceChartSection = ({ boxStats }) => (
  <Grid
    container
    spacing={2}
    sx={{
      width: "100%",
      borderRadius: "16px",
      border: "1px solid",
      borderColor: "divider",
      p: 2,
    }}
  >
    <Typography
      variant="subtitle1"
      sx={{
        width: "100%",
        textAlign: "start",
        fontWeight: 600,
        fontSize: "1rem",
        mb: 1,
      }}
      color="text.primary"
    >
      نمودار قیمت مرغ در هفته گذشته (میانگین قیمت)
    </Typography>
    <Box sx={{ height: "400px", width: "100%" }}>
      {boxStats?.chickenPrice?.length > 0 ? (
        <Line
          data={{
            labels: boxStats.chickenPrice.map((item) =>
              formatJustDate(item.date)
            ),
            datasets: [
              {
                label: "میانگین قیمت مرغ (ریال)",
                data: boxStats.chickenPrice.map(
                  (item) => item.chickenAveragePrice
                ),
                fill: {
                  target: "origin",
                  above: "rgba(75, 192, 192, 0.2)",
                  below: "rgba(75, 192, 192, 0.2)",
                },
                backgroundColor: "rgba(75, 192, 192, 0.2)",
                borderColor: "rgba(75, 192, 192, 1)",
                borderWidth: 4,
                tension: 0.4,
                pointRadius: 5,
                pointHoverRadius: 7,
                pointBackgroundColor: "rgba(75, 192, 192, 1)",
                pointBorderColor: "#fff",
                pointBorderWidth: 2,
              },
            ],
          }}
          options={{
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                position: "top",
                rtl: true,
                labels: {
                  font: {
                    family: "iranyekan",
                    size: 12,
                  },
                  padding: 20,
                  usePointStyle: true,
                },
              },
              tooltip: {
                callbacks: {
                  label: (context) => {
                    return `${
                      context.dataset.label
                    }: ${context.parsed.y.toLocaleString()} ریال`;
                  },
                },
                displayColors: false,
                backgroundColor: "rgba(0, 0, 0, 0.7)",
                titleFont: {
                  size: 14,
                  family: "iranyekan",
                },
                bodyFont: {
                  size: 12,
                  family: "iranyekan",
                },
              },
            },
            scales: {
              x: {
                grid: {
                  display: false,
                  drawBorder: false,
                },
                ticks: {
                  color: "#6B7280",
                  font: {
                    family: "iranyekan",
                  },
                },
              },
              y: {
                beginAtZero: false,
                grid: {
                  display: false,
                  drawBorder: false,
                },
                ticks: {
                  color: "#6B7280",
                  font: {
                    family: "iranyekan",
                  },
                  callback: function (value) {
                    return value.toLocaleString() + " ریال";
                  },
                },
              },
            },
            elements: {
              line: {
                tension: 0.4,
              },
              point: {
                radius: 5,
                hoverRadius: 7,
              },
            },
          }}
        />
      ) : (
        <Typography sx={{ textAlign: "center", py: 4 }}>
          داده‌ای برای نمایش موجود نیست
        </Typography>
      )}
    </Box>
  </Grid>
);
