import React, { useCallback } from "react";
import styles from "./index.module.scss";
import FileViewer from "react-file-viewer";
import { useSelector } from "react-redux";
import store, { RootState } from "@/store";
import { CloseOutlined } from "@ant-design/icons";
import { MessageFu } from "@/utils/message";

function FileLookCom() {
  const { fileLookUrl } = useSelector((state: RootState) => state.A0Layout);

  const closePageFu = useCallback(() => {
    store.dispatch({
      type: "layout/fileLookUrl",
      payload: { url: "", name: "" },
    });
  }, []);

  const errFu = useCallback(() => {
    MessageFu.warning("不支持或文件格式错误!");
    closePageFu();
  }, [closePageFu]);

  return (
    <>
      {fileLookUrl.url ? (
        <div className={styles.FileLookCom}>
          {/* 关闭按钮 */}
          <div className="FileLookClose" onClick={closePageFu}>
            <CloseOutlined rev={undefined} />
          </div>

          <FileViewer
            fileType={fileLookUrl.name.replace(".", "")}
            filePath={fileLookUrl.url}
            onError={errFu}
            // errorComponent={errFu}
            // unsupportedComponent={errFu}
          />
        </div>
      ) : null}
    </>
  );
}

const MemoFileLookCom = React.memo(FileLookCom);

export default MemoFileLookCom;
