import React, { useMemo } from "react";
import { useParams } from "react-router";
import { useRef } from "react";
import domtoimage from "dom-to-image";
import "./Certificate.css";
import { useReactToPrint } from "react-to-print";
import { useGetShareCertificate } from "../../../apis/ShareCertificate";
import LoadingAnimation from "../Loading/LoadingAnimation";
import Rkd from "../../../component/Certificates/Rkd";
import Pagenotfound from "../../Pagenotfound";
import BandipurCableCar from "../../../component/Certificates/BandipurCableCar";
import Button from "../../../component/Button/Button";
import Tifl from "../../../component/Certificates/Tifl";
import Bizbazar from "../../../component/Certificates/Bizbazar";
import Panchase from "../../../component/Certificates/Panchase";

/**

 * Represents  Certificate page component
 * @module Certificate
 * @return {JSX.Element}
 */
const Certificate = () => {
  /**
   * React useParams for getting id
   * @name useParams
   * @memberof module:Certificate
   * @type {object}
   */
  const { id } = useParams();
  /**
   * React useRef for getting component ref
   * @name useRef
   * @memberof module:Certificate
   * @type {React.MutableRefObject<undefined>}
   */
  const componentRef = useRef();
  const {
    data: certificate,
    isLoading: certificateLoading,
    error,
    isError,
  } = useGetShareCertificate(id);

  /**
   * React useMemo for getting certificate data
   * @name certificateData
   * @memberof module:Certificate
   * @type {object}
   */
  const certificateData = useMemo(() => {
    return certificate?.data?.data || {};
  }, [certificate?.data]);
  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
  });

  /**
   * Function for handle download
   * @name handleDownload
   * @memberof module:Certificate
   * @function handleDownload
   * @returns {void}
   */
  const handleDownload = () => {
    try {
      const element = document.getElementById("image_container_tag"); // Replace with your div's ID
      setTimeout(() => {
        domtoimage
          .toJpeg(element)
          .then(function (dataUrl) {
            const link = document.createElement("a");
            link.download = "certificate.jpg";
            link.href = dataUrl;
            link.click();
          })
          .catch(function (error) {
            console.error("Error capturing image:", error);
          });
      }, 1000);
    } catch (err) {
      console.log(err.message);
    }
  };

  if (certificateLoading) {
    return <LoadingAnimation />;
  }
  if (isError) {
    return <Pagenotfound />;
  }
  const getCompanyCertificate = (companySymbol) => {
    switch (String(companySymbol).toLowerCase()) {
      case "tifl":
        return (
          <Tifl certificateData={certificateData} componentRef={componentRef} />
        );
      case "rkd":
        return (
          <Rkd certificateData={certificateData} componentRef={componentRef} />
        );

      case "bizbazar":
        return (
          <Bizbazar
            certificateData={certificateData}
            componentRef={componentRef}
          />
        );
      case "bandipur":
        return (
          <BandipurCableCar
            certificateData={certificateData}
            componentRef={componentRef}
          />
        );
      case "panchase":
        return (
          <Panchase
            certificateData={certificateData}
            componentRef={componentRef}
          />
        );
      default:
        return <div>Unknown company </div>;
    }
  };
  return (
    <div className="certificate_wrapper">
      <div className="button_container flex justify-end gap-2">
        <Button onClick={handlePrint}>
          <ion-icon name="print"></ion-icon> Print
        </Button>
        <Button onClick={handleDownload}>
          <ion-icon name="download"></ion-icon> Download
        </Button>
      </div>
      <div className="certificate_container ">
        {getCompanyCertificate(certificateData?.share_details?.share?.symbol)}
      </div>
    </div>
  );
};

export default Certificate;