'use client';

import { GetServerSideProps, NextPage, Metadata } from 'next';
import Head from 'next/head';
import { promises as fs } from 'fs';
import path from 'path';

import React from 'react';
import { Worker } from '@react-pdf-viewer/core';
import { 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';

export const metadata: Metadata = {
  robots: {
    index: false,
    follow: false,
  },
};

import type {
  ToolbarProps,
  ToolbarSlot,
  TransformToolbarSlot,
} from '@react-pdf-viewer/toolbar';

interface PdfViewerProps {
  fileExists: boolean;
  file: string;
}

const PdfViewer: NextPage<PdfViewerProps> = ({ fileExists, file }) => {
  const transform: TransformToolbarSlot = (slot: ToolbarSlot) => ({
    ...slot,
    Open: () => <></>,
    OpenMenuItem: () => <></>,
  });
  const renderToolbar = (
    Toolbar: (props: ToolbarProps) => React.ReactElement,
  ) => <Toolbar>{renderDefaultToolbar(transform)}</Toolbar>;
  const defaultLayoutPluginInstance = defaultLayoutPlugin({
    sidebarTabs: (defaultTabs) => [
      defaultTabs[0], // Thumbnails tab
      defaultTabs[1], // Bookmarks tab
    ],
    renderToolbar,
  });
  const { renderDefaultToolbar } =
    defaultLayoutPluginInstance.toolbarPluginInstance;

  if (!fileExists) {
    return <div>404 - 文件未找到</div>;
  }
  const pdfUrl = file ? `/agreement/${file}.pdf` : '';

  return (
    <>
      <Head>
        <meta name="robots" content="noindex, nofollow" />
      </Head>
      <div style={{ height: '100vh' }}>
        <Worker
          workerUrl={`https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js`}
        >
          <div
            style={{
              height: '100%',
            }}
          >
            <Viewer fileUrl={pdfUrl} plugins={[defaultLayoutPluginInstance]} />
          </div>
        </Worker>
      </div>
    </>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const { file } = params as { file: string };

  if (!file) {
    return { notFound: true };
  }

  const filePath = path.join(
    process.cwd(),
    'public',
    'agreement',
    `${file}.pdf`,
  );

  try {
    await fs.access(filePath);

    return { props: { fileExists: true, file } };
  } catch (error) {
    return { notFound: true };
  }
};

export default PdfViewer;