import type { DragEvent } from "react";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import CloudUploadOutlinedIcon from "@mui/icons-material/CloudUploadOutlined";

import {
  getFormBorderColor,
  getFormSoftBg,
} from "@/components/ui/form";

type UploadDropZoneProps = {
  onDragOver: (event: DragEvent<HTMLDivElement>) => void;
  onDrop: (event: DragEvent<HTMLDivElement>) => void;
  onUploadClick: () => void;
};

export function UploadDropZone({
  onDragOver,
  onDrop,
  onUploadClick,
}: UploadDropZoneProps) {
  const theme = useTheme();

  return (
    <Box
      onClick={onUploadClick}
      onDrop={onDrop}
      onDragOver={onDragOver}
      sx={{
        height: 135,
        border: `1px dashed ${getFormBorderColor(theme)}`,
        borderRadius: "10px",
        bgcolor: getFormSoftBg(theme),
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
        mb: 2,
        cursor: "pointer",
        transition: "0.2s",
        "&:hover": {
          bgcolor: alpha(theme.palette.primary.main, 0.1),
          borderColor: theme.palette.primary.main,
        },
      }}
    >
      <CloudUploadOutlinedIcon
        sx={{
          fontSize: 34,
          color: theme.palette.primary.main,
          mb: 0.5,
        }}
      />

      <Typography
        sx={{
          fontSize: 11,
          color: theme.palette.text.secondary,
          fontWeight: 600,
        }}
      >
        <Box
          component="span"
          sx={{
            color: theme.palette.primary.main,
            fontWeight: 700,
          }}
        >
          Click to upload
        </Box>{" "}
        or drag and drop
      </Typography>

      <Typography sx={{ fontSize: 10, color: theme.palette.text.secondary }}>
        pdf 1MB
      </Typography>
    </Box>
  );
}