import React, { useEffect, useState } from "react";
import { Bar, Line } from "react-chartjs-2";
import { AdvancedTable } from "../../../../components/advanced-table/AdvancedTable";
import { Grid } from "../../../../components/grid/Grid";
import { Chart as ChartJs } from "chart.js/auto";
import { defaults } from "chart.js";
import { IconButton } from "@mui/material";
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
import { useDispatch, useSelector } from "react-redux";
import { killsDailyReportService } from "../../services/kills-daily-report-service";
import { format } from "date-fns-jalali";
import { SPACING } from "../../../../data/spacing";
defaults.font.family = "iranyekan";
console.log(ChartJs);

export const JahadKillStatsComponent = () => {
  const dispatch = useDispatch();

  const { killsDailyReport } = useSelector((state) => state.jahadSlice);

  const [tableData, setTableData] = useState([]);

  const [barChartData] = useState({
    labels: killsDailyReport?.map((item) =>
      format(new Date(item.date), "yyyy/MM/dd")
    ),
    datasets: [
      {
        label: "درخواست کشتار",
        data: killsDailyReport?.map((item) => item.totalPoultryRequestQuantity),
        backgroundColor: "#ff6384",
      },
      {
        label: "تایید شده",
        data: killsDailyReport?.map((item) => item.acceptedRequestQuantity),
        backgroundColor: "#36a2eb",
      },
    ],
    options: {
      title: {
        display: true,
        text: "Monthly Sales and Expenses Report",
        fontSize: 18,
      },
      legend: {
        position: "bottom",
      },
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
            },
          },
        ],
      },
    },
  });
  const [chartData] = useState({
    labels: killsDailyReport?.map((item) =>
      format(new Date(item.date), "yyyy/MM/dd")
    ),
    datasets: [
      {
        label: "میانگین وزن",
        data: killsDailyReport?.map((item) => item.indexWeight),
        borderColor: "#ff6384",
        fill: false,
      },
    ],
    options: {
      title: {
        display: true,
        text: "Monthly Sales Report",
        fontSize: 18,
      },
      legend: {
        position: "bottom",
      },
      tooltips: {
        mode: "index",
        intersect: false,
      },
    },
  });

  useEffect(() => {
    dispatch(killsDailyReportService());
  }, []);

  useEffect(() => {
    const d = killsDailyReport?.map((item, i) => {
      return [
        item.province,
        item.date,
        item.indexWeight,
        item.remainQuantity,
        item.provinceQuantity,
        item.countryQuantity,
        <a
          target={"_blank"}
          href={`https://core-inventory.iran.liara.run/pdf/kills-daily-report?date=${item.date}&which=${window.location.origin}`}
          key="rrr"
          rel="noreferrer"
        >
          <IconButton color="primary" key="rrr">
            <PictureAsPdfIcon />
          </IconButton>
        </a>,
      ];
    });
    setTableData(d);
  }, [killsDailyReport]);

  return (
    <Grid mt={SPACING.SMALL}>
      <Grid container>
        <Grid xs={12} sm={6}>
          <Bar data={barChartData} />
        </Grid>
        <Grid xs={12} sm={6}>
          <Line data={chartData} />
        </Grid>
      </Grid>

      <AdvancedTable
        name={"آمار روزانه کشتار استان"}
        columns={[
          "استان",
          "درخواست کشتار",
          "وزن اعلامی",
          "مرغ باقی مانده",
          "تایید نهایی استان",
          "تایید نهایی کشوری",
          "دریافت سند",
        ]}
        data={tableData}
      />
    </Grid>
  );
};
