import React, {useState} from 'react';
import './files-quick-access.scss'
import {Subfolder} from "../../../models/HrSupport/PersonalFolder";
import useFile from "../../HrSupport/z_hooks/useFile";
import PdfPreviewModal from "../../UI/Modal/PdfPreviewModal/PdfPreviewModal";
import useRole from "../../../hooks/useRole";

type FilesQuickAccessProps = {
    fetchSubfolders?: () => void
    subfolders?: Subfolder[]
    canEdit: boolean
    updateSignal?: number
    sendSignal?: () => void
}

const FilesQuickAccess = ({subfolders, fetchSubfolders, canEdit, sendSignal}: FilesQuickAccessProps) => {

    const {handleFileReplace, handleFileDownload} = useFile(sendSignal)
    const [activeModalFolder, setActiveModalFolder] = useState<Subfolder | null>(null);
    const closeModal = () => setActiveModalFolder(null);
    const activeRole = useRole();
    return (
        <div className={'files-quick-access'}>
            <ul>
                {
                    subfolders?.map(folder => (
                        <li key={folder.value} className={`${!folder.filepath && 'inactive'}`}>
                            <p className={'normal'}>
                                <span>Ψηφιοποιημένο Αρχείο «{folder.ui_name}»</span>
                            </p>

                            <p className={'on-hover'}>
                                {canEdit &&
                                    <span onClick={() => handleFileReplace(folder.filepath!,'',activeRole)}>Αντικατάσταση</span>
                                }

                                <span onClick={() => handleFileDownload(folder.filepath!, folder.ui_name,'',activeRole)}>Download</span>

                                {folder.temp_url &&
                                    <span onClick={() => setActiveModalFolder(folder)}>Προεπισκόπηση</span>
                                }

                                {activeModalFolder?.value === folder.value && folder.temp_url &&
                                    <PdfPreviewModal
                                        onClose={closeModal}
                                        pdfUrl={folder.temp_url}
                                    />
                                }
                            </p>
                        </li>
                    ))
                }

            </ul>
        </div>
    );

}

export default FilesQuickAccess;