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 {
  getBorderColor,
  getSoftBg,
} from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/add-dashboard-issue-dialog-styles";

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

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

  return (
    <Box
      {...(inputId
        ? { component: "label" as const, htmlFor: inputId }
        : { onClick: onUploadClick })}
      onDrop={onDrop}
      onDragOver={onDragOver}
      sx={{
        height: 135,
        border: `1px dashed ${getBorderColor(theme)}`,
        borderRadius: "10px",
        bgcolor: getSoftBg(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 10MB
      </Typography>
    </Box>
  );
}