import {
  Button,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  TextField,
} from "@mui/material";
import React, { useContext, useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { AppContext } from "../../../../contexts/AppContext";
import { useDispatch, useSelector } from "react-redux";
import { vetFarmEditTrafficCodeService } from "../../../vet-farm/services/vet-farm-edit-traffic-code";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { getDocumentStates } from "../../../province/services/getDocumentStates";
import { checkPathStartsWith } from "../../../../utils/checkPathStartsWith";

export const SuperAdminSubmitBarStatus = ({ item, updateTable }) => {
  const [documentState, setDocumentState] = useState(
    item?.barDocumentStatus?.key ? item?.barDocumentStatus?.key : ""
  );
  const [description, setdescription] = useState(
    item?.description ? item?.description : ""
  );
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();
  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );
  const handleStateChange = (event) => {
    setDocumentState(event.target.value);
  };

  const handledescriptionChange = (event) => {
    setdescription(event.target.value);
  };

  const [listData, setListData] = useState([]);

  useEffect(() => {
    dispatch(
      getDocumentStates({
        role_key: checkPathStartsWith("slaughter")
          ? selectedSubUser?.key || ""
          : "",
      })
    ).then((r) => {
      setListData(r.payload.data);
    });
  }, [selectedSubUser?.key]);

  return (
    <Grid container xs={12} gap={2}>
      <FormControl fullWidth>
        <InputLabel id="document-state-label">وضعیت سند</InputLabel>
        <Select
          labelId="document-state-label"
          id="document-state-select"
          value={documentState}
          label="وضعیت سند"
          onChange={handleStateChange}
        >
          {listData?.map((item, i) => (
            <MenuItem key={i} value={item?.key}>
              {item?.title}
            </MenuItem>
          ))}
        </Select>
      </FormControl>

      <TextField
        fullWidth
        label="توضیحات"
        multiline
        rows={4}
        value={description}
        onChange={handledescriptionChange}
        variant="outlined"
      />

      <Grid xs={12}>
        <Button
          fullWidth
          variant="contained"
          color="primary"
          onClick={() => {
            dispatch(
              vetFarmEditTrafficCodeService({
                key: item?.key,
                bar_document_status_key: documentState,
                bar_document_description: description,
                role: getRoleFromUrl(),
              })
            ).then(() => {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "عملیات با موفقیت انجام شد.",
                severity: "success",
              });
              updateTable(1);
              dispatch(CLOSE_MODAL());
            });
          }}
        >
          ثبت
        </Button>
      </Grid>
    </Grid>
  );
};
