import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
import { FC, MutableRefObject } from "react";
import AddIcon from "@mui/icons-material/Add";
import RemoveIcon from "@mui/icons-material/Remove";
import { Core } from "cytoscape";

type PositionControlProps = {
  cyRef: MutableRefObject<Core | null>;
};

export const ZoomControl: FC<PositionControlProps> = ({ cyRef }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));

  return (
    <Box
      sx={{
        position: "absolute",
        bottom: isMobile ? "15px" : "20px",
        right: isMobile ? "15px" : "20px",
        display: "flex",
        flexDirection: "column",
        gap: "10px",
        background: "#EEE4FC",
        padding: "16px",
        borderRadius: "8px",
        zIndex: 2,
      }}
    >
      <Button
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          minWidth: "36px",
          width: "36px",
          height: "36px",
          background: "#7E2AEA",
          fontSize: "16px",
          color: "#fff",
          zIndex: 2,
        }}
        onClick={() => {
          const currentZoom = cyRef.current?.zoom() || 1;
          cyRef.current?.zoom(currentZoom + 0.1);
        }}
      >
        <AddIcon />
      </Button>
      <Button
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          minWidth: "36px",
          width: "36px",
          height: "36px",
          background: "#7E2AEA",
          fontSize: "16px",
          color: "#fff",
          zIndex: 2,
        }}
        onClick={() => {
          const currentZoom = cyRef.current?.zoom() || 1;
          cyRef.current?.zoom(currentZoom - 0.1);
        }}
      >
        <RemoveIcon />
      </Button>
    </Box>
  );
};