n3wt-school/Front-End/src/components/Inscription/FilesToUpload.js

import React, { useState } from 'react';
import Table from '@/components/Table';
import FileUpload from '@/components/Form/FileUpload';
import { Upload, Eye, Trash2, FileText } from 'lucide-react';
import { BASE_URL } from '@/utils/Url';
import Popup from '@/components/Popup';
import logger from '@/utils/logger';

export default function FilesToUpload({
  parentFileTemplates,
  uploadedFiles,
  onFileUpload,
  onFileDelete,
  enable = true,
}) {
  const [selectedFile, setSelectedFile] = useState(null); // État pour le fichier sélectionné
  const [actionType, setActionType] = useState(null);

  const [popupVisible, setPopupVisible] = useState(false);
  const [popupMessage, setPopupMessage] = useState('');
  const [removePopupVisible, setRemovePopupVisible] = useState(false);
  const [removePopupMessage, setRemovePopupMessage] = useState('');
  const [removePopupOnConfirm, setRemovePopupOnConfirm] = useState(() => {});

  // Vérification si un fichier est déjà uploadé
  const isFileUploaded = (file) => {
    return file && file.fileName; // Si `fileName` est défini, le fichier est considéré comme téléversé
  };

  // Récupération d'un fichier uploadé
  const getUploadedFile = (templateId) => {
    return uploadedFiles.find(
      (file) => parseInt(file.id) === templateId && file.fileName
    );
  };

  const handleUpload = (file, selectedFile) => {
    if (!file || !selectedFile) {
      logger.error('Données manquantes pour le téléversement.');
      return;
    }

    // Appeler la fonction de téléversement passée en prop
    onFileUpload(file, selectedFile)
      .then((response) => {
        // Mettre à jour uploadedFiles avec les nouvelles données
        const updatedFiles = uploadedFiles.map((f) =>
          f.id === selectedFile.id
            ? {
                ...f,
                fileName: response.data.fileName,
                file: response.data.file_url,
              }
            : f
        );

        // Si le fichier n'existe pas encore, l'ajouter
        if (!updatedFiles.find((f) => f.id === selectedFile.id)) {
          updatedFiles.push({
            id: selectedFile.id,
            fileName: response.data.fileName,
            file: response.data.file_url,
          });
        }
      })
      .catch((error) => {
        logger.error('Erreur lors du téléversement du fichier :', error);
      });

    // Mettre à jour l'état local
    setSelectedFile(null);
    setActionType(null); // Réinitialiser l'action après l'upload
  };

  // Définition des colonnes
  const columns = [
    { name: 'Nom du fichier', transform: (row) => row.master_name },
    {
      name: 'Description du fichier',
      transform: (row) => row.master_description,
    },
    {
      name: 'Priorité',
      transform: (row) =>
        row.is_required ? (
          <span className="flex items-center justify-center">
            <span className="px-2 py-1 rounded-full bg-red-100 text-red-600 text-xs font-semibold">
              Requis
            </span>
          </span>
        ) : (
          <span className="flex items-center justify-center">
            <span className="px-2 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-semibold">
              Optionnel
            </span>
          </span>
        ),
    },
    {
      name: 'Statut',
      transform: (row) => {
        const uploadedFile = getUploadedFile(row.id);
        return (
          <span
            className={`px-2 py-1 rounded-md text-sm font-medium ${
              isFileUploaded(uploadedFile)
                ? 'bg-green-50 text-green-600'
                : 'bg-orange-50 text-orange-600'
            }`}
          >
            {isFileUploaded(uploadedFile) ? 'Chargé' : 'A ajouter'}
          </span>
        );
      },
    },
    {
      name: 'Actions',
      transform: (row) => {
        const uploadedFile = getUploadedFile(row.id);

        return (
          <div className="flex items-center justify-center gap-4">
            {uploadedFile && (
              <>
                <button
                  className={`flex items-center justify-center w-8 h-8 rounded-full ${
                    actionType === 'view' && selectedFile?.id === row.id
                      ? 'bg-blue-100 text-blue-600 ring-3 ring-blue-500'
                      : 'text-blue-500 hover:text-blue-700'
                  }`}
                  onClick={() => {
                    if (actionType === 'view' && selectedFile?.id === row.id) {
                      setSelectedFile(null);
                      setActionType(null);
                    } else {
                      const uploadedFile = getUploadedFile(row.id);
                      setSelectedFile(uploadedFile || row); // Utiliser les données mises à jour
                      setActionType('view');
                    }
                  }}
                  type="button"
                >
                  <Eye className="w-5 h-5" />
                </button>
                {enable && (
                  <button
                    className="flex items-center justify-center w-8 h-8 rounded-full text-red-500 hover:text-red-700"
                    onClick={() => {
                      setRemovePopupVisible(true);
                      setRemovePopupMessage(
                        `Êtes-vous sûr(e) de vouloir supprimer le fichier "${row.master_name}" ?`
                      );
                      setRemovePopupOnConfirm(() => () => {
                        onFileDelete(row.id)
                          .then(() => {
                            setPopupMessage(
                              `Le fichier "${row.master_name}" a été supprimé avec succès.`
                            );
                            setPopupVisible(true);
                            setRemovePopupVisible(false);
                          })
                          .catch((error) => {
                            logger.error(
                              'Erreur lors de la suppression du fichier :',
                              error
                            );
                            setPopupMessage(
                              `Erreur lors de la suppression du fichier "${row.master_name}".`
                            );
                            setPopupVisible(true);
                            setRemovePopupVisible(false);
                          });
                        setActionType(null);
                        setSelectedFile(null);
                      });
                    }}
                    type="button"
                  >
                    <Trash2 className="w-5 h-5" />
                  </button>
                )}
              </>
            )}
            {!uploadedFile && (
              <button
                className={`flex items-center justify-center w-8 h-8 rounded-full ${
                  actionType === 'upload' && selectedFile?.id === row.id
                    ? 'bg-emerald-100 text-emerald-600 ring-3 ring-emerald-500'
                    : 'text-emerald-500 hover:text-emerald-700'
                }`}
                onClick={() => {
                  if (actionType === 'upload' && selectedFile?.id === row.id) {
                    setSelectedFile(null);
                    setActionType(null);
                  } else {
                    setSelectedFile(row);
                    setActionType('upload');
                  }
                }}
                type="button"
              >
                <Upload className="w-5 h-5" />
              </button>
            )}
          </div>
        );
      },
    },
  ];

  return (
    <div className="mt-8 mb-4 w-3/5">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center space-x-4">
          <div className="bg-emerald-100 p-3 rounded-full shadow-md">
            <FileText className="w-8 h-8 text-emerald-600" />
          </div>
          <div>
            <h2 className="text-2xl font-bold text-gray-800">
              Pièces à fournir
            </h2>
            <p className="text-sm text-gray-500 italic">
              Ajoutez les documents pour compléter votre inscription
            </p>
          </div>
        </div>
      </div>
      <Table data={parentFileTemplates} columns={columns} />
      {selectedFile && (
        <div className="mt-4">
          {actionType === 'view' && selectedFile.fileName ? (
            <iframe
              src={`${BASE_URL}${selectedFile.fileName}`}
              title="Document Viewer"
              className="w-full"
              style={{
                height: '75vh',
                border: 'none',
              }}
            />
          ) : actionType === 'upload' && enable ? (
            <FileUpload
              selectionMessage={`Téléversez le fichier ${selectedFile.master_name}`}
              onFileSelect={(file) => handleUpload(file, selectedFile)}
              uploadedFileName={selectedFile.fileName || ''}
            />
          ) : null}
        </div>
      )}
      <Popup
        isOpen={popupVisible}
        message={popupMessage}
        onConfirm={() => setPopupVisible(false)}
        onCancel={() => setPopupVisible(false)}
        uniqueConfirmButton={true}
      />
      <Popup
        isOpen={removePopupVisible}
        message={removePopupMessage}
        onConfirm={removePopupOnConfirm}
        onCancel={() => setRemovePopupVisible(false)}
      />
    </div>
  );
}