import React, { useEffect, useState } from "react";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { useDispatch, useSelector } from "react-redux";
import { slaughterGetPaymentOverviewInfo } from "../../services/slaughter-get-payment-overview-info";
import { slaughterGetWalletBalance } from "../../services/get-wallet-balance";
import { Button, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { ROUTE_SLAUGHTER_WALLET } from "../../../../routes/routes";

export const SLaughterPaymentOverview = () => {
  const { slaughterPaymentOverview } = useSelector(
    (item) => item.slaughterSlice
  );
  const dispatch = useDispatch();

  const [balance, setBalance] = useState(0);
  useEffect(() => {
    dispatch(slaughterGetWalletBalance()).then((r) => {
      setBalance(r.payload.data?.balance);
    });
  }, []);

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

  const navigate = useNavigate();

  return (
    <Grid justifyContent="center" gap={SPACING.SMALL} xs={12}>
      <SimpleTable
        name={
          <Grid container xs={12} justifyContent="space-between">
            <Grid>
              <Typography variant="body1" style={{ color: "gray" }}>
                اطلاعات کلی
              </Typography>
            </Grid>
            <Grid container gap={1} alignItems="center">
              <Typography variant="body1" color="primary">
                موجودی کیف پول: {balance?.toLocaleString()} ﷼
              </Typography>
              <Button
                color="secondary"
                variant="outlined"
                onClick={() => {
                  navigate(ROUTE_SLAUGHTER_WALLET);
                }}
              >
                افزایش موجودی
              </Button>
            </Grid>
          </Grid>
        }
        columns={[
          "تعداد کل سفارشات",
          "حجم کل سفارشات (قطعه)",
          "وزن کل سفارشات (کیلوگرم)",
          "مبلغ کل تعرفه",
          "سفارشات پرداخت شده",
          "وزن کل پرداخت شده (کیلوگرم)",
          "مبلغ کل پرداخت شده (ريال)",
          "سفارشات پرداخت نشده",
          "وزن کل پرداخت نشده (کیلوگرم)",
          "مبلغ کل پرداخت نشده (ريال)",
          "سفارشات بایگانی شده",
          "وزن کل بایگانی شده",
          "مبلغ کل بایگانی شده (ريال)",
        ]}
        data={[
          [
            slaughterPaymentOverview?.wageInfo?.totalCount.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.totalQuantity.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.totalWeight.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.totalWage?.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.paidCount.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.totalWeightPaid.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.totalPaidWage.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.unpaidCount.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.totalWeightUnpaid.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.totalUnpaidWage.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.archiveCount.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.totalWeightArchive.toLocaleString(),
            slaughterPaymentOverview?.wageInfo.totalArchiveWage.toLocaleString(),
          ],
        ]}
      />
    </Grid>
  );
};
