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 "./add-issue-dialog-types";
import { AttachmentFileCard } from "./attachment-file-card";
import { UploadDropZone } from "./upload-drop-zone";
import { UploadIconButton } from "./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={{
          mb: 0.8,
          fontSize: 12,
          fontWeight: 600,
          color: theme.palette.text.primary,
        }}
      >
        Issue Attachment
      </Typography>

      <input
        ref={fileInputRef}
        type="file"
        hidden
        accept=".pdf,.jpg,.jpeg,.png,.webp,application/pdf,image/jpeg,image/png,image/webp"
        onChange={onFileChange}
      />

      {attachment ? (
        <Box
          sx={{
            mb: 2,
            display: "flex",
            flexDirection: {
              xs: "column",
              sm: "row",
            },
            alignItems: {
              xs: "stretch",
              sm: "center",
            },
            gap: 2,
          }}
        >
          <AttachmentFileCard
            attachment={attachment}
            uploadStatus={uploadStatus}
          />

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