import { Button, Typography } from "@mui/material";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import { SlaughterPayFeesGateway } from "../slaughter-pay-fees-gateway/SlaughterPayFeesGateway";
import { SlaughterPayFeesManual } from "../slaughter-pay-fees-manual/SlaughterPayFeesManual";

export const SlaughterPayingFeesOverview = ({
  selectedItems,
  totalSelectedFees,
  totalSelectedWeight,
  updateTable,
}) => {
  const dispatch = useDispatch();

  return (
    <Grid container width="100%" direction="column" gap={SPACING.TINY}>
      <Typography>تعداد سفارشات انتخاب شده: {selectedItems?.length}</Typography>
      <Typography>
        وزن بارهای انتخاب شده: {totalSelectedWeight?.toLocaleString()} کیلوگرم
      </Typography>
      <Typography>
        مبلغ کل تعرفه سفارشات: {totalSelectedFees?.toLocaleString()} ﷼
      </Typography>
      <Typography>
        مبلغ مالیات بر ارزش افزوده{" "}
        {Number(totalSelectedFees / 10)?.toLocaleString()} ﷼
      </Typography>
      <Typography
        color="secondary"
        style={{ borderStyle: "solid", borderWidth: "1px", padding: "3px" }}
      >
        مبلغ کل تعرفه + مالیات بر ارزش افزوده:{" "}
        {(
          Number(totalSelectedFees) + Number(totalSelectedFees / 10)
        )?.toLocaleString()}{" "}
        ﷼
      </Typography>

      {Boolean(selectedItems.length) && (
        <Grid container direction="column" mt={SPACING.TINY} gap={SPACING.TINY}>
          {(getRoleFromUrl() === "ProvinceOperator" ||
            getRoleFromUrl() === "SuperAdmin") && (
            <Button
              variant="outlined"
              onClick={() => {
                dispatch(
                  OPEN_MODAL({
                    title: "پرداخت تعرفه ",
                    content: (
                      <SlaughterPayFeesManual
                        updateTable={updateTable}
                        selectedItems={selectedItems}
                      />
                    ),
                  })
                );
              }}
            >
              پرداخت تعرفه - دستی
            </Button>
          )}
          <Button
            variant="contained"
            onClick={() => {
              dispatch(
                OPEN_MODAL({
                  title: "پرداخت تعرفه  از طریق درگاه پرداخت",
                  content: (
                    <SlaughterPayFeesGateway selectedItems={selectedItems} />
                  ),
                })
              );
            }}
          >
            پرداخت تعرفه - درگاه پرداخت
          </Button>
        </Grid>
      )}
    </Grid>
  );
};
