import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import LoadingAnimation from '../Loading/LoadingAnimation';
import baseUrl from '../../../array/base/config';
import '../Documents/documents.css';
import { Worker } from '@react-pdf-viewer/core';
import { Viewer } from '@react-pdf-viewer/core';

import '@react-pdf-viewer/core/lib/styles/index.css';

/**
 * Represents DocumentSingle page component
 * @module DocumentSinglePage
 * @returns {JSX.Element}
 */
const DocumentSinglePage = () => {
  /**
   * @constant documentFile - state variable to store document file
   * @type {object}
   * @default {{}}
   * @memberof module:DocumentSinglePage
   */
  const [documentFile, setDocumentFile] = useState({});
  /**
   * @constant isLoading - state variable to store loading status
   * @type {boolean}
   * @default true
   * @memberof module:DocumentSinglePage
   */
  const [isLoading, setIsLoading] = useState(true);
  const { id } = useParams();

  useEffect(() => {
    singleDocumentApicall();
  }, []);
  /**
   * Function to get single document
   * @memberof module:DocumentSinglePage
   * @function singleDocumentApicall
   * @returns {void}
   */
  const singleDocumentApicall = () => {
    const detail = localStorage.getItem('token');
    axios({
      method: 'get',
      url: `${baseUrl}/api/shareholderdocument/${id}/`,
      headers: {
        Authorization: `Token ${detail}`,
      },
    })
      .then((res) => {
        setDocumentFile(res?.data?.data?.document_file);
        setIsLoading(false);
      })
      .catch((err) => console.log(err));
  };

  if (isLoading) {
    return <LoadingAnimation />;
  }
  /**
   * constant fileExtension - state variable to store file extension
   * @constant fileExtension - state variable to store file extension
   * @type {void|any|null}
   */
  const fileExtension = documentFile && documentFile.includes(".") ? documentFile.split(".").pop() : null;

  return (
    <div className='dodument_single_page'>
      {fileExtension==="pdf"?
      <>
        <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
          <Viewer fileUrl={documentFile} />
        </Worker>
      </>
      :
      <>
        <img src={documentFile} alt="Document" />
      </>
      }
    </div>
  );
};

export default DocumentSinglePage;