import { Box, Button, Skeleton, useTheme, useMediaQuery } from "@mui/material";
import Plus from "@icons/questionsPage/plus";
import Image from "../assets/icons/questionsPage/image";

import type { SxProps, Theme } from "@mui/material";

interface Props {
  sx?: SxProps<Theme>;
  imageSrc?: string;
  onImageClick?: () => void;
  onPlusClick?: () => void;
  uploading: boolean;
}

export default function AddOrEditImageButton({
  onImageClick,
  onPlusClick,
  sx,
  imageSrc,
  uploading = false,
}: Props) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));

  return (
    <>
      {uploading ? (
        <Skeleton
          variant="rounded"
          sx={{
            height: "40px",
            width: isMobile ? "auto" : "80px",
            margin: isMobile ? "8px" : "0 10px 0 8px",
          }}
        />
      ) : (
        <Box
          sx={{
            display: "flex",
            height: "40px",
            minWidth: "60px",
            width: "60px",
            borderRadius: "3px",
            overflow: "hidden",
            ...sx,
          }}
        >
          <Button
            onClick={onImageClick}
            sx={{
              p: 0,
              minWidth: "40px",
              flexGrow: 1,
              backgroundColor: "#EEE4FC",
            }}
          >
            {imageSrc ? (
              <img
                src={imageSrc}
                alt=""
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "scale-down",
                  display: "block",
                }}
              />
            ) : (
              <Image
                sx={{
                  height: "100%",
                  width: "100%",
                }}
              />
            )}
          </Button>
          <Button
            onClick={onPlusClick}
            data-cy="add-image-button"
            sx={{
              p: 0,
              minWidth: "20px",
              width: "20px",
            }}
          >
            <Plus />
          </Button>
        </Box>
      )}
    </>
  );
}