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

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

export default function FileUpload({
  selectionMessage,
  onFileSelect,
  uploadedFileName,
  existingFile,
  required,
  errorMsg,
  enable = true, // Nouvelle prop pour activer/désactiver le champ
}) {
  const [localFileName, setLocalFileName] = useState(uploadedFileName || '');
  const fileInputRef = useRef(null);

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

  const handleFileDrop = (e) => {
    e.preventDefault();
    if (!enable) return; // Empêcher le dépôt si désactivé
    const file = e.dataTransfer.files[0];
    if (file) {
      setLocalFileName(file.name);
      logger.debug('Fichier déposé:', file.name);
      onFileSelect(file);
    }
  };

  return (
    <div
      className={`border p-4 rounded-md shadow-md ${
        !enable ? 'bg-gray-100 cursor-not-allowed' : ''
      }`}
    >
      <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 p-6 rounded-lg flex flex-col items-center justify-center ${
          !enable
            ? 'border-gray-300 bg-gray-100 cursor-not-allowed'
            : 'border-gray-500 hover:border-emerald-500'
        }`}
        onClick={() => enable && fileInputRef.current.click()} // Désactiver le clic si `enable` est false
        onDragOver={(e) => enable && e.preventDefault()}
        onDrop={handleFileDrop}
      >
        <CloudUpload
          className={`w-12 h-12 mb-4 ${
            !enable ? 'text-gray-400' : 'text-emerald-500'
          }`}
        />
        <input
          type="file"
          accept=".pdf, .png, .jpg, .jpeg, .gif, .bmp"
          onChange={handleFileChange}
          className="hidden"
          ref={fileInputRef}
          disabled={!enable} // Désactiver l'input si `enable` est false
        />
        <label
          htmlFor="fileInput"
          className={`text-center ${
            !enable ? 'text-gray-400' : 'text-gray-500'
          }`}
        >
          <p className="text-lg font-semibold">
            {enable ? 'Déposez votre fichier ici' : 'Téléversement désactivé'}
          </p>
          {enable && (
            <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'
                ? existingFile.split('/').pop() // Si c'est une chaîne, utilisez split
                : existingFile?.name || 'Nom de 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>
  );
}