import React, { FC, useState } from 'react';
import { Document, Page } from 'react-pdf';

import { Skeleton } from 'antd';

import styles from './PdfViewer.module.scss';

import { useGetAuthFileUrl } from '../../hooks/useGetAuthFile';
import { LoadingStatus } from '../../store/types';
import Loader from '../Loader';
import classNames from 'classnames';

interface ScrollPdfProps {
  url: string;
  className?: string;
}

const ScrollPdf: FC<ScrollPdfProps> = ({ url, className }) => {
  const [numPages, setNumPages] = useState(1);

  const { fileUrl, loadingStatus } = useGetAuthFileUrl(url);

  if (loadingStatus === LoadingStatus.LOADING) {
    return (
      <div className={styles.loadingImage}>
        <Skeleton.Image />
        <Loader size={'large'} />
      </div>
    );
  }

  if (loadingStatus === LoadingStatus.ERROR || !fileUrl) {
    return (
      <div className={styles.loadingImage}>
        <Skeleton.Image />
      </div>
    );
  }

  return (
    <Document
      file={fileUrl}
      onLoadSuccess={({ numPages }) => setNumPages(numPages)}
    >
      {Array.apply(null, Array(numPages))
        .map((x, i) => i + 1)
        .map((page, i) => (
          <Page
            key={i}
            pageNumber={page}
            className={classNames(styles.scrollPdf, className)}
          />
        ))}
    </Document>
  );
};

export default ScrollPdf;