import React, { useState, useEffect } from "react";
import { useLocation, 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";

/**
 * @description This is a functional component used to show the single file of the shared contract
 * @module ShareFileSinglePage
 * @return {JSX.Element}
 */
const ShareFileSinglePage = () => {
  /**
   * @description isLoading is a state variable which is used to show the loading animation
   * @type {boolean}
   * @constant
   * @default true
   * @memberof module:ShareFileSinglePage
   */
  const [isLoading, setIsLoading] = useState(true);
  /**
   * @description documentFile is a state variable which is used to store the file of the shared contract
   * @type {string}
   * @constant
   * @default null
   * @memberof module:ShareFileSinglePage
   */
  const [documentFile, setDocumentFile] = useState(null);
  /**
   * This is the constant for getting the location
   * @constant
   * @memberof module:ShareFileSinglePage
   * @type {Location}
   */
  const location = useLocation();
  /**
   * React useParams hook returns an object of key/value pairs of URL parameters.
   * Use it to access match.params of the current <Route>.
   * @constant
   * @memberof module:ShareFileSinglePage
   * @type {object}
   * @name useParams
   *
   */
  const { id } = useParams();


  useEffect(() => {
    singleDocumentApicall();
  }, []);

  /**
   * @description singleDocumentApicall is a function which is used to get the single file of the shared contract
   * @function singleDocumentApicall
   * @memberof module:ShareFileSinglePage
   *
   */
  const singleDocumentApicall = () => {
    const detail = localStorage.getItem("token");
    axios({
      method: "get",
      url: `${baseUrl}/api/sharecontract/`,
      headers: {
        Authorization: `Token ${detail}`,
      },
    })
      .then((res) => {
        // setDocumentFile(res?.data?.data?.document_file);
        const foundObj = res.data.data.results.find((obj) => obj.id == id);
        const signatureKaranamaFile = foundObj?.signature_karanama_file;
        setDocumentFile(signatureKaranamaFile);
        setIsLoading(false);
      })
      .catch((err) => console.log(err));
  };

  if (isLoading) {
    return <LoadingAnimation />;
  }

  //   const fileExtension =
  //     documentFile && documentFile.includes(".")
  //       ? documentFile.split(".").pop()
  //       : null;

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

export default ShareFileSinglePage;