import { Button } from "@mui/material";
import { getSystemBaseAddress } from "../../../../utils/getSystemBaseAddress";
import { useDispatch, useSelector } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { useContext } from "react";
import { AppContext } from "../../../../contexts/AppContext";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";

export const PaymentLinkModal = ({ item }) => {
  const userPath = useSelector((state) => state.userSlice.userPath);

  const paymentLink = `${window.location.origin}/pay/${getSystemBaseAddress(
    userPath
  )}/${item?.wageInfo?.userToken}`;

  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();

  const handleCopyLink = () => {
    navigator.clipboard.writeText(paymentLink).then(() => {
      openNotif({
        vertical: "top",
        horizontal: "center",
        msg: "لینک پرداخت کپی شد",
        severity: "success",
      });
      dispatch(CLOSE_MODAL());
    });
  };

  return (
    <Grid xs={12} container spacing={3} alignItems="center" direction="column">
      <Grid container spacing={2} justifyContent="center" alignItems="center">
        <Grid>
          <Button
            fullWidth
            variant="contained"
            sx={{ backgroundColor: "blue", color: "white" }}
            onClick={() => window.open(paymentLink, "_blank")}
          >
            پرداخت بدهی
          </Button>
        </Grid>

        <Grid>
          <Button
            fullWidth
            variant="outlined"
            sx={{ color: "blue", borderColor: "blue" }}
            onClick={handleCopyLink}
          >
            کپی لینک
          </Button>
        </Grid>
      </Grid>
    </Grid>
  );
};
