Untitled

import React, {useEffect, useRef} from 'react';
import {Button, Modal} from '@themesberg/react-bootstrap';
import FileViewer from 'react-file-viewer';
import WebViewer from '@pdftron/pdfjs-express';


const FileViewerModal = (props) => {
	const viewerDiv = useRef(null);

	const handleClose = () => {
		props.onClose();
	};

	const filePath = props.selectedFileUrl;
	const abc = filePath?.split('.');
	console.log(filePath)
	console.log(abc)

	const summary = () => {

	}

	useEffect(() => {
		WebViewer(
			{
				path: '/webviewer/lib',
				initialDoc: filePath,
			},
			viewerDiv.current,
		).then((instance) => {

		});
	}, []);

	return (
		<Modal fullscreen={true} className="filePreviewModal" show={props.show} onHide={handleClose}>
			<Modal.Header closeButton>
				{/*<Modal.Title>File Viewer</Modal.Title>*/}
				<Button type="button" variant="secondary">
					<a href={filePath}>Tải xuống</a>
				</Button>
				<Button type="button" variant="secondary" onClick={summary} style={{marginLeft : '10px'}}>
					Tóm tắt
				</Button>
			</Modal.Header>
			<Modal.Body>
				<div className="webViewer" ref={viewerDiv}></div>
			</Modal.Body>
			<Modal.Footer>
				<Button type="button" variant="secondary" onClick={handleClose}>
					Đóng
				</Button>
			</Modal.Footer>

				{/*<div className="webViewer" ref={viewerDiv}></div>*/}
		</Modal>
	);
};

export default FileViewerModal;