"use client";

import { useRef, useState, type ChangeEvent, type DragEvent } from "react";

import Box from "@mui/material/Box";

import type { UploadStatus } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/add-dashboard-issue-dialog-types";
import { RequiredSectionTitle } from "@/features/ministry/meeting-summary/components/view-meeting-summary/view-meeting-summary-shared";
import { IssuesReferenceUploadField } from "@/features/ministry/meeting-summary/components/create-meeting-summary/issues-reference-upload-field";

type Props = {
  file: File | null;
  onFileSelect?: (file: File) => void;
};

export function CreateMeetingSummaryUploadSection({ file, onFileSelect }: Props) {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [uploadStatus, setUploadStatus] = useState<UploadStatus>("idle");

  function handleFileSelect(nextFile: File) {
    onFileSelect?.(nextFile);
    setUploadStatus("uploading");
    window.setTimeout(() => setUploadStatus("completed"), 800);
  }

  function handleDragOver(event: DragEvent<HTMLDivElement>) {
    event.preventDefault();
  }

  function handleDrop(event: DragEvent<HTMLDivElement>) {
    event.preventDefault();
    const droppedFile = event.dataTransfer.files?.[0];
    if (droppedFile) handleFileSelect(droppedFile);
  }

  function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
    const selectedFile = event.target.files?.[0];
    if (selectedFile) handleFileSelect(selectedFile);
    event.target.value = "";
  }

  function handleUploadClick() {
    fileInputRef.current?.click();
  }

  return (
    <Box>
      <RequiredSectionTitle>Summary Meeting Reference</RequiredSectionTitle>

      <Box sx={{ maxWidth: 375 }}>
        <IssuesReferenceUploadField
          attachment={file}
          fileInputRef={fileInputRef}
          uploadStatus={uploadStatus}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          onFileChange={handleFileChange}
          onUploadClick={handleUploadClick}
        />
      </Box>
    </Box>
  );
}