import {
  Button,
  FormControlLabel,
  IconButton,
  Popover,
  Switch,
  Tooltip,
} from "@mui/material";
import { useContext, useState } from "react";
import TuneIcon from "@mui/icons-material/Tune";
import EditIcon from "@mui/icons-material/Edit";
import { Grid } from "../../../../components/grid/Grid";
import {
  CLOSE_MODAL,
  DRAWER,
  OPEN_MODAL,
} from "../../../../lib/redux/slices/appSlice";
import { useDispatch } from "react-redux";
import DeleteIcon from "@mui/icons-material/Delete";
import { AppContext } from "../../../../contexts/AppContext";
import { ProvinceJahadRancherDetails } from "../province-jahad-rancher-details/ProvinceJahadRancherDetails";
import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
import { ProvinceJahadEditRancher } from "../province-jahad-edit-rancher/ProvinceJahadEditRancher";
import { ProvicneJahadSubmitHerd } from "../province-jahad-submit-herd/ProvicneJahadSubmitHerd";
import AddIcon from "@mui/icons-material/Add";
import { ProvinceJahadSubmitDhi } from "../province-jahad-submit-dhi/ProvinceJahadSubmitDhi";
import { provinceJahadEditRancher } from "../../services/province-jahad-rancher-activation";
import { provinceJahadDeleteRancherService } from "../../services/province-jahad-unions-delete-rancher";

export const ProvinceJahadRancherOperations = ({
  item,
  updateTable,
  getDashboardData,
}) => {
  const dispatch = useDispatch();
  const [popoverOpen, setPopoverOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);
  const [openNotif] = useContext(AppContext);

  const openPopover = (event) => {
    setPopoverOpen(true);
    setAnchorEl(event.currentTarget);
  };

  const closePopover = () => {
    setPopoverOpen(false);
    setAnchorEl(null);
  };

  return (
    <Grid>
      <IconButton variant="contained" color="primary" onClick={openPopover}>
        <TuneIcon />
      </IconButton>
      <Popover
        open={popoverOpen}
        anchorEl={anchorEl}
        onClose={closePopover}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
      >
        <div style={{ padding: 10 }}>
          <Grid
            container
            direction="column"
            alignItems="center"
            justifyContent="center"
            gap={1}
          >
            <Tooltip title={"جزِئیات گله"} placement="left-start">
              <IconButton
                color="primary"
                size="small"
                onClick={() => {
                  closePopover();
                  dispatch(
                    OPEN_MODAL({
                      title: `جزئیات گله`,
                      content: <ProvinceJahadRancherDetails item={item} />,
                    })
                  );
                }}
              >
                <RemoveRedEyeIcon />
              </IconButton>
            </Tooltip>

            <Tooltip title={"DHI"} placement="left-start">
              <Button
                variant="outlined"
                // disabled
                size="small"
                aria-label="delete"
                onClick={() => {
                  closePopover();
                  dispatch(
                    OPEN_MODAL({
                      title: "DHI",
                      content: (
                        <ProvinceJahadSubmitDhi
                          item={item}
                          updateTable={updateTable}
                          getDashboardData={getDashboardData}
                        />
                      ),
                    })
                  );
                }}
              >
                DHI
              </Button>
            </Tooltip>

            <Tooltip title={"ایجاد گله"} placement="left-start">
              <IconButton
                // disabled
                aria-label="delete"
                color="primary"
                onClick={() => {
                  closePopover();
                  dispatch(
                    DRAWER({
                      title: "ایجاد گله برای دامدار",
                      right: !(window.innerWidth <= 600),
                      bottom: window.innerWidth <= 600,
                      content: (
                        <ProvicneJahadSubmitHerd
                          updateTable={updateTable}
                          getDashboardData={getDashboardData}
                          rancherKey={item?.key}
                        />
                      ),
                    })
                  );
                }}
              >
                <AddIcon />
              </IconButton>
            </Tooltip>

            <Tooltip title={"ویرایش دامدار"} placement="left-start">
              <IconButton
                color="primary"
                onClick={() => {
                  closePopover();
                  dispatch(
                    DRAWER({
                      right: true,
                      top: false,
                      content: (
                        <ProvinceJahadEditRancher
                          item={item}
                          updateTable={updateTable}
                        />
                      ),
                      title: "ویرایش دامدار ",
                    })
                  );
                }}
              >
                <EditIcon />
              </IconButton>
            </Tooltip>
            <FormControlLabel
              control={
                <Switch
                  size="small"
                  checked={item?.type === "industrial"}
                  onChange={() => {
                    dispatch(
                      provinceJahadEditRancher({
                        key: item?.key,
                        type: item?.type === "rural" ? "industrial" : "rural",
                      })
                    ).then((r) => {
                      if (r.payload.error) {
                        openNotif({
                          vertical: "top",
                          horizontal: "center",
                          msg: r.payload.error,
                          severity: "error",
                        });
                      } else {
                        updateTable();
                        openNotif({
                          vertical: "top",
                          horizontal: "center",
                          msg: "عملیات با موفقیت انجام شد.",
                          severity: "success",
                        });
                      }
                    });
                  }}
                  color="primary"
                />
              }
              label={item?.type === "rural" ? "روستایی" : "صنعتی"}
              style={{
                justifyContent: "center",
                alignItems: "center",
                display: "flex",
              }}
            />

            <Tooltip title={"حذف"} placement="left-start">
              <IconButton
                aria-label="delete"
                color="error"
                onClick={() => {
                  closePopover();
                  dispatch(
                    OPEN_MODAL({
                      title: "آیا مطمئن هستید؟",
                      content: (
                        <Grid container>
                          <Button
                            color="error"
                            variant="contained"
                            onClick={() => {
                              dispatch(
                                provinceJahadDeleteRancherService(item?.key)
                              ).then((r) => {
                                if (r.payload.error) {
                                  openNotif({
                                    vertical: "top",
                                    horizontal: "center",
                                    msg: r.payload.error,
                                    severity: "error",
                                  });
                                } else {
                                  updateTable();
                                  dispatch(CLOSE_MODAL());
                                  openNotif({
                                    vertical: "top",
                                    horizontal: "center",
                                    msg: r.payload.data.result,
                                    severity: "success",
                                  });
                                }
                              });
                            }}
                          >
                            تایید
                          </Button>
                          <Button
                            onClick={() => {
                              dispatch(CLOSE_MODAL());
                            }}
                          >
                            لغو
                          </Button>
                        </Grid>
                      ),
                    })
                  );
                }}
              >
                <DeleteIcon />
              </IconButton>
            </Tooltip>
          </Grid>
        </div>
      </Popover>
    </Grid>
  );
};
