/* eslint-disable */
import { Modal } from "antd";
import React, { useEffect, useRef } from "react";
import * as commonConfig from "@/utils/config";
import PrintPdf from "@/components/PrintPdf/PrintPdf";
import jsPreviewDocx from "@js-preview/docx";
import jsPreviewExcel from "@js-preview/excel";
import "@js-preview/docx/lib/index.css";
import "@js-preview/excel/lib/index.css";

const OfficePreview = props => {
  const { officePreviewVisible, officeFileUrl, onCancel, app } = props;
  const title = officeFileUrl
    .split("/")
    .pop()
    .split("_")
    .pop();
  const fileUrl = `${commonConfig.file_host}file/download?savePathStr=${encodeURIComponent(officeFileUrl)}&sModelsId=100&token=${app.token}`;
  const fileType = title
    .split(".")
    .pop()
    .toUpperCase();
  const officeRef = useRef(null);
  useEffect(() => {
    if (fileType === "XLSX") {
      const myExcelPreviewer = jsPreviewExcel.init(officeRef.current);
      myExcelPreviewer.preview(fileUrl);
    } else if (fileType === "DOCX") {
      const myDocxPreviewer = jsPreviewDocx.init(officeRef.current);
      myDocxPreviewer.preview(fileUrl);
    }
  }, []);
  return (
    <Modal title={title} visible={officePreviewVisible} width="100%" height="100%" style={{ top: 0 }} footer={null} onCancel={onCancel}>
      <div
        style={{
          width: "100%",
          height: "calc(100vh - 67px)",
          overflow: "auto",
        }}
      >
        <div style={{ width: "100%", height: "100%" }} ref={officeRef}>
          {fileType === "PDF" && <PrintPdf style={{ height: "100%" }} previewUrl={fileUrl} />}
          {["MP4", "WEBM", "OGG"].includes(fileType) && (
            <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
              <video src={fileUrl} controls style={{ height: "100%" }} />
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
};

export default OfficePreview;