import { IconButton } from "@mui/material";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import LocalShippingIcon from "@mui/icons-material/LocalShipping";
import { SPACING } from "../../../../data/spacing";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import TradePanelPurchaseModal from "../trade-panel-purchase-modal/TradePanelPurchaseModal";

export const TradePanelPurchaseOperation = ({ item, updateTable }) => {
  const dispatch = useDispatch();

  return (
    <Grid container direction="column" gap={SPACING.TINY} width="100%">
      <IconButton
        disabled={!item?.remainQuantity}
        variant="contained"
        color="primary"
        onClick={() => {
          dispatch(
            OPEN_MODAL({
              title: "ثبت خرید",
              content: (
                <TradePanelPurchaseModal
                  item={item}
                  updateTable={updateTable}
                />
              ),
            })
          );
        }}
      >
        <LocalShippingIcon />
      </IconButton>
    </Grid>
  );
};
