import { Button, TextField } from "@mui/material";
import { Box } from "@mui/system";
import { useContext, useState } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { AppContext } from "../../../../contexts/AppContext";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import { provinceArchiveFeeOperationService } from "../../services/province-archive-fee-operation";

export const ProvinceArchiveFeeOperation = ({ selectedItems, updateTable }) => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);
  const [text, setText] = useState("");

  const handleChange = (event) => {
    setText(event.target.value);
  };

  const submitForm = () => {
    dispatch(
      provinceArchiveFeeOperationService({
        role: getRoleFromUrl(),
        message: text,
        province_kill_request_list: selectedItems,
        type: "archive",
      })
    ).then((r) => {
      updateTable();
      if (r.payload.error) {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: r.payload.error,
          severity: "error",
        });
      } else {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: "عملیات با موفقیت انجام شد.",
          severity: "success",
        });
        dispatch(CLOSE_MODAL());
      }
    });
  };

  return (
    <Grid width="100%">
      <Box>
        <TextField
          id="outlined-multiline-static"
          label="دلیل بایگانی"
          multiline
          rows={3}
          variant="outlined"
          fullWidth
          value={text}
          onChange={handleChange}
        />
      </Box>
      <Box mt={1}>
        <Button
          variant="contained"
          color="primary"
          onClick={submitForm}
          disabled={!text}
          fullWidth
        >
          ثبت
        </Button>
      </Box>
    </Grid>
  );
};
