import { Button, IconButton, TextField, Tooltip } from "@mui/material";
import EditIcon from "@mui/icons-material/Edit";
import { useDispatch } from "react-redux";
import { CLOSE_MODAL, OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { useContext, useState } from "react";
import { cityEditHatchingQuantityService } from "../../services/city-edit-hatching-quantity";
import { AppContext } from "../../../../contexts/AppContext";
// import { cityGetHatchings } from "../../services/city-get-hatchings";
// import { cityGetHatchingsByAge } from "../../services/city-get-hatchings-by-age";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";

export const CityEditHatchingQuantity = ({
  quantity,
  hatchingKey,
  selectedAge1,
  selectedAge2,
  updateTable,
}) => {
  const dispatch = useDispatch();

  return (
    <Tooltip title={"ویرایش تعداد جوجه ریزی"} placement="left-start">
      <IconButton
        size="small"
        color="primary"
        onClick={() => {
          dispatch(
            OPEN_MODAL({
              title: "ویرایش تعداد جوجه ریزی",
              content: (
                <ModalContent
                  selectedAge1={selectedAge1}
                  selectedAge2={selectedAge2}
                  quantity={quantity}
                  hatchingKey={hatchingKey}
                  updateTable={updateTable}
                />
              ),
            })
          );
        }}
      >
        <EditIcon fontSize="10" />
      </IconButton>
    </Tooltip>
  );
};

const ModalContent = ({
  quantity,
  hatchingKey,
  selectedAge1,
  selectedAge2,
  updateTable,
}) => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);
  const [value, setValue] = useState(quantity);

  const handleChange = (event) => {
    setValue(event.target.value);
  };
  return (
    <>
      <TextField
        label="تعداد"
        type="number"
        variant="outlined"
        value={value}
        onChange={handleChange}
      />
      <Button
        disabled={!value}
        fullWidth
        variant="contained"
        onClick={() => {
          dispatch(
            cityEditHatchingQuantityService({
              key: hatchingKey,
              quantity: Number(value),
              role: getRoleFromUrl(),
            })
          ).then((r) => {
            if (r.payload.error) {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: r.payload.error,
                severity: "error",
              });
            } else {
              // dispatch(cityGetHatchingsByAge({ selectedAge1, selectedAge2 }));
              // dispatch(cityGetHatchings({ selectedDate1, selectedDate2 }));
              updateTable();
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "عملیات با موفقیت انجام شد.",
                severity: "success",
              });
              dispatch(CLOSE_MODAL());
            }
          });
        }}
      >
        ثبت
      </Button>
    </>
  );
};