import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
import { ExpandIcon } from "@icons/questionsPage/ExpandIcon";
import { AlignIcon } from "@icons/questionsPage/AlignIcon";
import { FC, MutableRefObject } from "react";
import { Core } from "cytoscape";

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

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

  return (
    <Box
      sx={{
        position: "absolute",
        bottom: isMobile ? "15px" : "20px",
        left: isMobile ? "15px" : "20px",
        display: "flex",
        gap: "10px",
      }}
    >
      <Button
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          minWidth: "36px",
          width: "36px",
          height: "36px",
          background: "#9A9AAF",
          opacity: "0.7",
          zIndex: 2,
        }}
        onClick={() => {
          cyRef.current?.zoom(1);
          cyRef.current?.center();
        }}
      >
        <ExpandIcon />
      </Button>
      <Button
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          minWidth: "36px",
          width: "36px",
          height: "36px",
          background: "#9A9AAF",
          opacity: "0.7",
          zIndex: 2,
        }}
        onClick={() => {
          cyRef.current?.fit(undefined, 70);
        }}
      >
        <AlignIcon />
      </Button>
    </Box>
  );
};
