Checkmate/Client/src/Components/Inputs/Image/index.jsx

import React, { useState } from "react";
import PropTypes from "prop-types";
import { Box, IconButton, Stack, TextField, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import "./index.css";
import { checkImage } from "../../../Utils/fileUtils";

/**
 * @param {Object} props - The component props.
 * @param {string} props.id - The unique identifier for the input field.
 * @param {string} props.src - The URL of the image to display.
 * @param {function} props.onChange - The function to handle file input change.
 * @returns {JSX.Element} The rendered component.
 */

const ImageField = ({ id, src, loading, onChange }) => {
  const theme = useTheme();

  const [isDragging, setIsDragging] = useState(false);
  const handleDragEnter = () => {
    setIsDragging(true);
  };
  const handleDragLeave = () => {
    setIsDragging(false);
  };

  return (
    <>
      {!checkImage(src) || loading ? (
        <>
          <Box
            className="image-field-wrapper"
            mt={theme.spacing(8)}
            sx={{
              position: "relative",
              height: "fit-content",
              border: "dashed",
              borderRadius: theme.shape.borderRadius,
              borderColor: isDragging
                ? theme.palette.primary.main
                : theme.palette.border.light,
              borderWidth: "2px",
              transition: "0.2s",
              "&:hover": {
                borderColor: theme.palette.primary.main,
                backgroundColor: "hsl(215, 87%, 51%, 0.05)",
              },
            }}
            onDragEnter={handleDragEnter}
            onDragLeave={handleDragLeave}
            onDrop={handleDragLeave}
          >
            <TextField
              id={id}
              type="file"
              onChange={onChange}
              sx={{
                width: "100%",
                "& .MuiInputBase-input[type='file']": {
                  opacity: 0,
                  cursor: "pointer",
                  maxWidth: "500px",
                  minHeight: "175px",
                },
                "& fieldset": {
                  padding: 0,
                  border: "none",
                },
              }}
            />
            <Stack
              className="custom-file-text"
              alignItems="center"
              gap="4px"
              sx={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                zIndex: "-1",
                width: "100%",
              }}
            >
              <IconButton
                sx={{
                  pointerEvents: "none",
                  borderRadius: theme.shape.borderRadius,
                  border: `solid ${theme.shape.borderThick}px ${theme.palette.border.light}`,
                  boxShadow: theme.shape.boxShadow,
                }}
              >
                <CloudUploadIcon />
              </IconButton>
              <Typography component="h2" color={theme.palette.text.tertiary}>
                <Typography
                  component="span"
                  fontSize="inherit"
                  color={theme.palette.primary.main}
                  fontWeight={500}
                >
                  Click to upload
                </Typography>{" "}
                or drag and drop
              </Typography>
              <Typography
                component="p"
                color={theme.palette.text.tertiary}
                sx={{ opacity: 0.6 }}
              >
                (maximum size: 3MB)
              </Typography>
            </Stack>
          </Box>
          <Typography
            component="p"
            color={theme.palette.text.tertiary}
            sx={{ opacity: 0.6 }}
          >
            Supported formats: JPG, PNG
          </Typography>
        </>
      ) : (
        <Stack direction="row" justifyContent="center">
          <Box
            sx={{
              width: "250px",
              height: "250px",
              borderRadius: "50%",
              overflow: "hidden",
              backgroundImage: `url(${src})`,
              backgroundSize: "cover",
            }}
          ></Box>
        </Stack>
      )}
    </>
  );
};

ImageField.propTypes = {
  id: PropTypes.string.isRequired,
  src: PropTypes.string,
  onChange: PropTypes.func.isRequired,
};

export default ImageField;