import React, {useEffect, useRef} from 'react';
import {Button, Modal} from '@themesberg/react-bootstrap';
import FileViewer from 'react-file-viewer';
import WebViewer from '@pdftron/webviewer';
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>*/}
{/* <FileViewer fileType={abc && abc[abc.length - 1].toLowerCase()} filePath={filePath}/>*/}
{/*</Modal.Body>*/}
{/*<Modal.Footer>*/}
{/* <Button type="button" variant="secondary" onClick={handleClose}>*/}
{/* Đóng*/}
{/* </Button>*/}
{/*</Modal.Footer>*/}
<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;