import { Typography, Box, useTheme, ButtonBase, Modal, TextField, InputAdornment } 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 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: "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: "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",
              }}
              onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
            >
              <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*/}
        {/*    sx={{*/}
        {/*      display: "flex",*/}
        {/*      justifyContent: "space-between",*/}
        {/*      margin: "20px 0",*/}
        {/*    }}*/}
        {/*  >*/}
        {/*    <Typography*/}
        {/*      sx={{*/}
        {/*        fontWeight: "bold",*/}
        {/*        color: "#4D4D4D",*/}
        {/*      }}*/}
        {/*    >*/}
        {/*      Или выберите на фотостоке*/}
        {/*    </Typography>*/}
        {/*    <img src={UnsplashIcon} alt="" />*/}
        {/*  </Box>*/}
        {/*  <TextField*/}
        {/*    id="search-in-unsplash"*/}
        {/*    placeholder="Ищите изображения на английском языка"*/}
        {/*    sx={{*/}
        {/*      "& .MuiInputBase-input": {*/}
        {/*        height: "48px",*/}
        {/*        padding: "0 10px 0 0",*/}
        {/*      },*/}
        {/*      "& .MuiOutlinedInput-notchedOutline": {*/}
        {/*        borderRadius: "8px",*/}
        {/*      },*/}
        {/*      "& .Mui-focused .MuiOutlinedInput-notchedOutline": {*/}
        {/*        border: "1px solid rgba(0, 0, 0, 0.23)",*/}
        {/*      },*/}
        {/*      "& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {*/}
        {/*        borderColor: "rgba(0, 0, 0, 0.23)",*/}
        {/*      },*/}
        {/*    }}*/}
        {/*    InputProps={{*/}
        {/*      startAdornment: (*/}
        {/*        <InputAdornment*/}
        {/*          position="start"*/}
        {/*          sx={{*/}
        {/*            outline: "none",*/}
        {/*            "& svg > path": { stroke: "#9A9AAF" },*/}
        {/*          }}*/}
        {/*        >*/}
        {/*          <SearchIcon />*/}
        {/*        </InputAdornment>*/}
        {/*      ),*/}
        {/*    }}*/}
        {/*  />*/}
        </Box>
      </Box>
    </Modal>
  );
};