n3wt-school/Front-End/src/components/FileUpload.js

import React, { useState, useRef } from 'react';
import { CloudUpload } from 'lucide-react';
import logger from '@/utils/logger';
import { BASE_URL } from '@/utils/Url';

export default function FileUpload({
  selectionMessage,
  onFileSelect,
  uploadedFileName,
  existingFile,
  required,
  errorMsg,
}) {
  const [localFileName, setLocalFileName] = useState(uploadedFileName || '');
  const fileInputRef = useRef(null); // Utilisation de useRef pour cibler l'input

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setLocalFileName(file.name);
      logger.debug('Fichier sélectionné:', file.name);
      onFileSelect(file); // Appelle la fonction passée en prop
    }
  };

  const handleFileDrop = (e) => {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    if (file) {
      setLocalFileName(file.name);
      logger.debug('Fichier déposé:', file.name);
      onFileSelect(file); // Appelle la fonction passée en prop
    }
  };

  return (
    <div className="border p-4 rounded-md shadow-md">
      <h3 className="text-lg font-semibold mb-4">
        {`${selectionMessage}`}
        {required && <span className="text-red-500 ml-1">*</span>}
      </h3>
      <div
        className="border-2 border-dashed border-gray-500 p-6 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-emerald-500"
        onClick={() => fileInputRef.current.click()} // Utilisation de la référence pour ouvrir l'explorateur
        onDragOver={(e) => e.preventDefault()}
        onDrop={handleFileDrop}
      >
        <CloudUpload className="w-12 h-12 text-emerald-500 mb-4" />{' '}
        {/* Icône de cloud */}
        <input
          type="file"
          accept=".pdf, .png, .jpg, .jpeg, .gif, .bmp"
          onChange={handleFileChange}
          className="hidden"
          ref={fileInputRef} // Attachement de la référence
        />
        <label htmlFor="fileInput" className="text-center text-gray-500">
          <p className="text-lg font-semibold text-gray-800">
            Déposez votre fichier ici
          </p>
          <p className="text-sm text-gray-500 mt-2">
            ou cliquez pour sélectionner un fichier
          </p>
        </label>
      </div>

      {/* Affichage du fichier existant */}
      {existingFile && !localFileName && (
        <div className="mt-4 flex items-center space-x-4 bg-gray-100 p-3 rounded-md shadow-sm">
          <CloudUpload className="w-6 h-6 text-emerald-500" />
          <p className="text-sm font-medium text-gray-800">
            <span className="font-semibold">
              {typeof existingFile === 'string' ? (
                <a
                  href={`${BASE_URL}${existingFile}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-blue-500 hover:text-blue-700 underline"
                >
                  {existingFile.split('/').pop()}
                </a>
              ) : (
                existingFile?.name || 'Fichier inconnu'
              )}
            </span>
          </p>
        </div>
      )}

      {/* Affichage du fichier sélectionné */}
      {localFileName && (
        <div className="mt-4 flex items-center space-x-4 bg-gray-100 p-3 rounded-md shadow-sm">
          <CloudUpload className="w-6 h-6 text-emerald-500" />
          <p className="text-sm font-medium text-gray-800">
            <span className="font-semibold">{localFileName}</span>
          </p>
        </div>
      )}

      {/* Message d'erreur */}
      {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
    </div>
  );
}