import type { ChangeEvent, DragEvent, RefObject } from "react";

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

import type { UploadStatus } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/add-dashboard-issue-dialog-types";
import { AttachmentFileCard } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/attachment-file-card";
import { UploadDropZone } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/upload-drop-zone";
import { UploadIconButton } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/upload-icon-button";

type IssueAttachmentFieldProps = {
  attachment: File | null;
  fileInputRef: RefObject<HTMLInputElement | null>;
  onDragOver: (event: DragEvent<HTMLDivElement>) => void;
  onDrop: (event: DragEvent<HTMLDivElement>) => void;
  onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
  onUploadClick: () => void;
  uploadStatus: UploadStatus;
};

export function IssueAttachmentField({
  attachment,
  fileInputRef,
  onDragOver,
  onDrop,
  onFileChange,
  onUploadClick,
  uploadStatus,
}: IssueAttachmentFieldProps) {
  const theme = useTheme();

  return (
    <>
      <Typography
        sx={{
          fontSize: 12,
          fontWeight: 600,
          color: theme.palette.text.primary,
          mb: 0.8,
        }}
      >
        Issue Attachment
      </Typography>

      <input
        ref={fileInputRef}
        type="file"
        hidden
        accept=".pdf,image/*"
        onChange={onFileChange}
      />

      {attachment ? (
        <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 2 }}>
          <AttachmentFileCard
            attachment={attachment}
            uploadStatus={uploadStatus}
          />

          <UploadIconButton
            onUploadClick={onUploadClick}
            onDrop={onDrop}
            onDragOver={onDragOver}
          />
        </Box>
      ) : (
        <UploadDropZone
          onUploadClick={onUploadClick}
          onDrop={onDrop}
          onDragOver={onDragOver}
        />
      )}
    </>
  );
}