import { Button, Grid, TextField } from "@mui/material";
import { useContext, useState } from "react";
import { useDispatch } from "react-redux";
import { AppContext } from "../../../../contexts/AppContext";
import { SPACING } from "../../../../data/spacing";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import { slaughterPayingFeesManual } from "../../services/salughter-paying-fees-manual";

export const SlaughterPayFeesManual = ({ selectedItems, updateTable }) => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);
  const [inputValue, setInputValue] = useState("");

  // Function to handle text field changes
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <Grid container direction="column" gap={SPACING.TINY}>
      <TextField
        label="کد رهگیری"
        variant="outlined"
        value={inputValue}
        onChange={handleInputChange}
      />
      <Button
        fullWidth
        variant="contained"
        disabled={!inputValue}
        onClick={() => {
          dispatch(
            slaughterPayingFeesManual({
              role: getRoleFromUrl(),
              province_kill_request: selectedItems,
              payment_type: "manual",
              tracking_code: inputValue,
            })
          ).then((r) => {
            updateTable();
            dispatch(CLOSE_MODAL());
            openNotif({
              vertical: "top",
              horizontal: "center",
              msg: "عملیات با موفقیت انجام شد.",
              severity: "success",
            });
          });
        }}
      >
        ثبت
      </Button>
    </Grid>
  );
};
