import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
import { useMemo, useState } from "react";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useTranslation } from "react-i18next";
import { enqueueSnackbar } from "notistack";
import { ACCEPT_SEND_FILE_TYPES_MAP } from "@/components/ViewPublicationPage/tools/fileUpload";
import UploadIcon from "@icons/UploadIcon";
import { uploadFile } from "@/utils/fileUpload";
import { useQuizStore } from "@/stores/useQuizStore";

interface ImageCardProps {
  questionId: string;
  imageUrl: string;
  isOwn?: boolean;
  onImageUpload?: (fileUrl: string) => void;
}

const useFileUpload = (questionId: string, onImageUpload?: (fileUrl: string) => void) => {
  const { t } = useTranslation();
  const [isSending, setIsSending] = useState(false);
  const [currentImageUrl, setCurrentImageUrl] = useState<string | null>(null);
  const { quizId, preview } = useQuizStore();

  const handleFileUpload = async (file: File | undefined) => {
    if (isSending || !file) return;

    const result = await uploadFile({
      file,
      questionId,
      quizId,
      fileType: "picture",
      preview,
      onSuccess: (fileUrl) => {
        setCurrentImageUrl(URL.createObjectURL(file));
        onImageUpload?.(fileUrl);
      },
      onError: (error) => {
        console.error(error);
        enqueueSnackbar(t(error.message));
      },
      onProgress: () => {
        setIsSending(true);
      },
    });

    setIsSending(false);
  };

  return {
    isSending,
    currentImageUrl,
    handleFileUpload,
  };
};

export const ImageCard = ({ questionId, imageUrl, isOwn, onImageUpload }: ImageCardProps) => {
  const theme = useTheme();
  const { t } = useTranslation();
  const isMobile = useRootContainerSize() < 450;
  const isTablet = useRootContainerSize() < 850;
  const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState(false);
  const { currentImageUrl, handleFileUpload } = useFileUpload(questionId, onImageUpload);

  const onDrop = (event: React.DragEvent<HTMLLabelElement>) => {
    event.preventDefault();
    setIsDropzoneHighlighted(false);

    const file = event.dataTransfer.files[0];
    handleFileUpload(file);
  };

  return (
    <Box sx={{ width: "100%", height: "300px", position: "relative" }}>
      <img
        src={currentImageUrl || imageUrl}
        style={{
          display: "block",
          width: "100%",
          height: "100%",
          objectFit: "cover",
          borderRadius: "12px 12px 0 0",
        }}
        alt=""
      />
      {isOwn && (
        <Box
          component="label"
          sx={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            opacity: isDropzoneHighlighted ? 1 : 0,
            transition: "opacity 0.2s",
            "&:hover": {
              opacity: 1,
            },
            borderRadius: "12px 12px 0 0",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
          onDragEnter={() => setIsDropzoneHighlighted(true)}
          onDragLeave={() => setIsDropzoneHighlighted(false)}
          onDragOver={(event) => event.preventDefault()}
          onDrop={onDrop}
        >
          <input
            onChange={({ target }) => handleFileUpload(target.files?.[0])}
            hidden
            accept={ACCEPT_SEND_FILE_TYPES_MAP.picture.join(",")}
            type="file"
          />
          <UploadIcon color="#FFFFFF" />
        </Box>
      )}
    </Box>
  );
};