import { Worker, Viewer } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import zh_CN from '@react-pdf-viewer/locales/lib/zh_CN.json';

const PdfPlayer = ({ courseFileUrl, isShellWeb }) => {
  /// 自定义工具栏
  const renderToolbar = (Toolbar) => (
    <Toolbar>
      {(slots) => {
        const {
          CurrentPageInput,
          EnterFullScreen,
          GoToNextPage,
          GoToPreviousPage,
          NumberOfPages,
          ShowSearchPopover,
          Zoom,
          ZoomIn,
          ZoomOut,
        } = slots;
        return (
          <div
            style={{
              alignItems: 'center',
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
            }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{ padding: '0px 2px' }}>
                <ShowSearchPopover />
              </div>
              <div style={{ padding: '0px 2px' }}>
                <GoToPreviousPage />
              </div>
              <CurrentPageInput />
              <div style={{ color: '#fff', padding: '0px 2px' }}>/</div>
              <div style={{ color: '#fff', padding: '0px 2px' }}>
                <NumberOfPages />
              </div>
              <div style={{ padding: '0px 2px' }}>
                <GoToNextPage />
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{ padding: '0px 2px' }}>
                <ZoomOut />
              </div>
              <div style={{ padding: '0px 2px' }}>
                <Zoom />
              </div>
              <div style={{ padding: '0px 2px' }}>
                <ZoomIn />
              </div>
            </div>
            <div
              style={{
                display: 'flex',
                flexDirection: 'row-reverse',
                minWidth: '200px',
              }}>
              <div style={{ padding: '0px 2px' }}>
                {!isShellWeb && <EnterFullScreen />}
              </div>
            </div>
          </div>
        );
      }}
    </Toolbar>
  );

  const defaultLayoutPluginInstance = defaultLayoutPlugin({
    renderToolbar: renderToolbar,
    sidebarTabs: (defaultTabs) => [],
  });

  return (
    <Worker workerUrl={process.env.PUBLIC_URL + '/pdf.worker.min.js'} async>
      <Viewer
        fileUrl={courseFileUrl}
        theme='dark'
        localization={zh_CN}
        plugins={[defaultLayoutPluginInstance]}
        style={{ width: '100%' }}
      />
    </Worker>
  );
};

export default PdfPlayer;
