import {
  IconButton,
  InputAdornment,
  TextField,
  Typography,
} from "@mui/material";
import { useContext, useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import EditIcon from "@mui/icons-material/Edit";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import { AppContext } from "../../../../contexts/AppContext";
import { vetFarmSubmitContradictsService } from "../../services/vet-farm-submit-contdadicts";
import {
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { useDispatch } from "react-redux";
// import { vetFarmGetAllocatedService } from "../../services/vet-farm-get-allocated";
// import { slaughterGetAllocatedCarsService } from "../../../slaughter-house/services/slaughter-get-allocated-cars";

export const VetFarmEditQuarantineCodeState = ({ code, item, updateTable }) => {
  const [openNotif] = useContext(AppContext);
  const [isEditMode, setIsEditMode] = useState(false);
  const [value, setValue] = useState(code);
  const dispatch = useDispatch();
  const handleChange = (event) => {
    setValue(event.target.value);
  };

  useEffect(() => {
    setValue(code);
    setIsEditMode(false);
  }, [code]);

  return (
    <Grid container>
      {isEditMode ? (
        <Grid container minWidth="120px">
          <TextField
            variant="standard"
            value={value}
            size="small"
            onChange={handleChange}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <Grid container width="50px">
                    <Typography
                      style={{ cursor: "pointer" }}
                      color="primary"
                      fontWeight="bold"
                      variant="caption"
                      onClick={() => {
                        setIsEditMode(!isEditMode);
                        dispatch(LOADING_START());
                        dispatch(
                          vetFarmSubmitContradictsService({
                            key: item.key,
                            quarantine_quantity: value,
                          })
                        ).then((r) => {
                          dispatch(LOADING_END());
                          if (r.payload.error) {
                            openNotif({
                              vertical: "top",
                              horizontal: "center",
                              msg: "مشکلی بوجود آمده است!",
                              severity: "error",
                            });
                          } else {
                            openNotif({
                              vertical: "top",
                              horizontal: "center",
                              msg: "عملیات با موفقیت انجام شد.",
                              severity: "success",
                            });
                            updateTable();
                          }
                        });
                      }}
                    >
                      ثبت
                    </Typography>
                    <Typography
                      style={{ cursor: "pointer" }}
                      ml={1}
                      color="error"
                      fontWeight="bold"
                      variant="caption"
                      onClick={() => {
                        setIsEditMode(!isEditMode);
                      }}
                    >
                      لغو
                    </Typography>
                  </Grid>
                </InputAdornment>
              ),
            }}
          />
        </Grid>
      ) : (
        <Grid container alignItems="center">
          <Typography
            variant="caption"
            color={item?.acceptedRealQuantity !== code ? "error" : "black"}
            sx={{ fontWeight: "800" }}
          >
            {code?.toLocaleString()}
          </Typography>
          {(getRoleFromUrl() === "AdminX" ||
            getRoleFromUrl() === "SuperAdmin") &&
            item.trash !== true && (
              <IconButton
                aria-label="delete"
                size="small"
                color="primary"
                onClick={() => {
                  setIsEditMode(!isEditMode);
                }}
              >
                <EditIcon />
              </IconButton>
            )}
        </Grid>
      )}
    </Grid>
  );
};
