import {
  Typography,
  Box,
  useTheme,
  ButtonBase,
  Modal,
  TextField,
  InputAdornment,
  useMediaQuery,
} from "@mui/material";
import UploadIcon from "@/assets/icons/UploadIcon";
import SearchIcon from "@/assets/icons/SearchIcon";
import UnsplashIcon from "@/assets/icons/Unsplash.svg";
import { useRef, useState, type DragEvent } from "react";

type ImageFormat = "jpg" | "jpeg" | "png" | "gif";

interface ModalkaProps {
  isOpen: boolean;
  onClose: () => void;
  handleImageChange: (file: File) => void;
  description?: string;
  accept?: ImageFormat[];
}

export const UploadImageModal: React.FC<ModalkaProps> = ({
  handleImageChange,
  isOpen,
  onClose,
  accept,
  description,
}) => {
  const theme = useTheme();
  const dropZone = useRef<HTMLDivElement>(null);
  const [ready, setReady] = useState(false);
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setReady(true);
  };

  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    event.stopPropagation();

    const file = event.dataTransfer.files[0];
    if (!file) return;

    handleImageChange(file);
  };

  const acceptedFormats = accept
    ? accept.map((format) => "." + format).join(", ")
    : "";

  return (
    <Modal
      open={isOpen}
      onClose={onClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          maxWidth: isMobile ? "300px" : "690px",
          bgcolor: "background.paper",
          borderRadius: "12px",
          boxShadow: 24,
          p: 0,
          overflow: "hidden",
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            padding: "20px",
            background: theme.palette.background.default,
          }}
        >
          <Typography
            sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}
          >
            Добавьте изображение
          </Typography>
          <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
            <input
              onChange={(event) =>
                event.target.files?.[0] &&
                handleImageChange(event.target.files[0])
              }
              hidden
              accept={acceptedFormats || ".jpg, .jpeg, .png , .gif"}
              multiple
              type="file"
              data-cy="upload-image-input"
            />
            <Box
              onDragOver={(event: DragEvent<HTMLDivElement>) =>
                event.preventDefault()
              }
              onDrop={handleDrop}
              ref={dropZone}
              sx={{
                width: "580px",
                padding: isMobile ? "33px" : "33px 10px 33px 55px",
                display: "flex",
                alignItems: "center",
                backgroundColor: theme.palette.background.default,
                border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
                borderRadius: "8px",
                gap: "55px",
                flexDirection: isMobile ? "column" : undefined,
              }}
              onDragEnter={handleDragEnter}
            >
              <UploadIcon />
              <Box>
                <Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
                  Загрузите или перетяните сюда файл
                </Typography>
                <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
                  {description ||
                    "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
                </Typography>
              </Box>
            </Box>
          </ButtonBase>
        </Box>
      </Box>
    </Modal>
  );
};
