import React from "react";
import PrevNext from "./prevNext";
import { PDFDownloadLink } from "@react-pdf/renderer";
import Certificate from "../Certificate/Certificate";
import printModule from "print-js";
import { getBase64FromUrl } from "../../utils/Utils";
import { saveAs } from "file-saver";
import "../../css/signature.css";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { useNavigate } from "react-router-dom";
import { themeColor } from "../../utils/ThemeColor/backColor";

function Header({
  isPdfRequestFiles,
  isPlaceholder,
  recipient,
  setIsDecline,
  pageNumber,
  isAlreadySign,
  allPages,
  changePage,
  pdfUrl,
  documentStatus,
  embedImages,
  pdfDetails,
  signerPos,
  signersdata,
  isMailSend,
  alertSendEmail,
  isSigned,
  isCompleted,
  isShowHeader,
  decline,
  currentSigner,
}) {
  const isMobile = window.innerWidth < 712;
  const navigate = useNavigate();

  //for go to previous page
  function previousPage() {
    changePage(-1);
  }
  //for go to next page
  function nextPage() {
    changePage(1);
  }
  //function for show decline alert
  const handleDeclinePdfAlert = async () => {
    const currentDecline = {
      currnt: "Sure",
      isDeclined: true,
    };
    setIsDecline(currentDecline);
  };

  //function for print digital sign pdf
  const handleToPrint = async (event) => {
    event.preventDefault();

    const pdf = await getBase64FromUrl(pdfUrl);

    printModule({ printable: pdf, type: "pdf", base64: true });
  };

  //handle download signed pdf
  const handleDownloadPdf = () => {
    const pdfName = pdfDetails[0] && pdfDetails[0].Name;

    saveAs(pdfUrl, `${pdfName}_signed_by_opensign.qik.ai.pdf`);
  };

  return (
    <div
      style={{ paddingBottom: "5px", paddingTop: "5px" }}
      className="mobileHead"
    >
      <div className="signatureHeader headerBtn">
        <PrevNext
          pageNumber={pageNumber}
          allPages={allPages}
          changePage={changePage}
        />

        {recipient ? (
          pdfUrl || isAlreadySign.mssg ? (
            <div style={{ display: "flex", flexDirection: "row" }}>
              {pdfDetails[0] && pdfDetails.length > 0 && (
                //    <Certificate
                //    pdfData={completePdfData}
                // />
                <PDFDownloadLink
                  document={<Certificate pdfData={pdfDetails} />}
                  fileName={`completion certificate-${
                    pdfDetails[0] && pdfDetails[0].Name
                  }.pdf`}
                >
                  {({ blob, url, loading, error }) =>
                    loading ? (
                      "Loading document..."
                    ) : (
                      <button
                        type="button"
                        className="defaultBtn certificateBtn"
                        style={{
                          display: "flex",
                          flexDirection: "row",
                          alignItems: "center",
                        }}
                      >
                        <i
                          class="fa fa-certificate"
                          style={{
                            color: "white",
                            fontSize: "15px",
                            marginRight: "3px",
                          }}
                          aria-hidden="true"
                        ></i>
                        Certificate
                      </button>
                    )
                  }
                </PDFDownloadLink>
              )}
              <button
                onClick={handleToPrint}
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                }}
                className="defaultBtn printBtn"
              >
                <i
                  class="fa fa-print"
                  style={{
                    fontSize: "15px",
                    marginRight: "3px",
                    color: "white",
                  }}
                  aria-hidden="true"
                ></i>
                Print
              </button>

              <button
                type="button"
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                }}
                className="defaultBtn downloadBtn"
                onClick={() => handleDownloadPdf()}
              >
                <i
                  className="fa fa-download"
                  style={{
                    color: "white",
                    fontSize: "15px",
                    marginRight: "3px",
                  }}
                  aria-hidden="true"
                ></i>
                Download
              </button>
            </div>
          ) : (
            <div style={{ display: "flex", flexDirection: "row" }}>
              <button
                style={{
                  background: "#de4337",
                }}
                className="finishBtn hoverCss"
                onClick={() => {
                  handleDeclinePdfAlert();
                }}
              >
                Decline
              </button>

              <button
                data-tut="reactourThird"
                style={{
                  background: !pdfUrl ? "#188ae2" : "#d3edeb",
                }}
                className="finishBtn sendHover"
                onClick={() => {
                  if (!pdfUrl) {
                    embedImages();
                  }
                }}
              >
                Finish
              </button>
            </div>
          )
        ) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
          <div style={{ display: "flex", flexDirection: "row" }}>
            <PDFDownloadLink
              document={<Certificate pdfData={pdfDetails} />}
              fileName={`completion certificate-${
                pdfDetails[0] && pdfDetails[0].Name
              }.pdf`}
            >
              {({ blob, url, loading, error }) =>
                loading ? (
                  "Loading document..."
                ) : (
                  <button
                    type="button"
                    style={{
                      display: "flex",
                      flexDirection: "row",
                      alignItems: "center",
                    }}
                    className="defaultBtn certificateBtn"
                  >
                    <i
                      class="fa fa-certificate"
                      style={{
                        color: "white",
                        fontSize: "15px",
                        marginRight: "3px",
                      }}
                      aria-hidden="true"
                    ></i>
                    Certificate
                  </button>
                )
              }
            </PDFDownloadLink>
            <button
              onClick={handleToPrint}
              type="button"
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
              }}
              className="defaultBtn printBtn"
            >
              <i
                class="fa fa-print"
                style={{
                  fontSize: "15px",
                  marginRight: "3px",
                  color: "white",
                }}
                aria-hidden="true"
              ></i>
              Print
            </button>
            <button
              type="button"
              className="defaultBtn downloadBtn"
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
                marginLeft: "10px",
              }}
              onClick={() => handleDownloadPdf()}
            >
              <i
                className="fa fa-download"
                style={{
                  color: "white",
                  fontSize: "15px",
                  marginRight: "3px",
                }}
                aria-hidden="true"
              ></i>
              Download
            </button>
          </div>
        ) : isPlaceholder ? (
          <>
            {!isMailSend &&
              signersdata.Signers &&
              signersdata.Signers.length !== signerPos.length && (
                <div>
                  {signerPos.length === 0 ? (
                    <span style={{ fontSize: "13px", color: "#f5405e" }}>
                      Add all {signersdata.Signers.length - signerPos.length}{" "}
                      recipients signature
                    </span>
                  ) : (
                    <span style={{ fontSize: "13px", color: "#f5405e" }}>
                      Add {signersdata.Signers.length - signerPos.length} more
                      recipients signature
                    </span>
                  )}
                </div>
              )}

            <div>
              <button
                onClick={() => {
                  navigate(-1);
                }}
                type="button"
                className="defaultBtn backBtn"
              >
                Back
              </button>

              <button
                data-tut="reactourFour"
                style={{
                  background: !isMailSend ? "#188ae2" : "#d3edeb",
                }}
                onClick={() => {
                  alertSendEmail();
                }}
                className="finishBtn sendHover"
              >
                Send
              </button>
            </div>
          </>
        ) : isPdfRequestFiles ? (
          isSigned ? (
            <div style={{ display: "flex", flexDirection: "row" }}>
              {isCompleted.isCertificate && (
                <PDFDownloadLink
                  document={<Certificate pdfData={pdfDetails} />}
                  fileName={`completion certificate-${
                    pdfDetails[0] && pdfDetails[0].Name
                  }.pdf`}
                >
                  {({ blob, url, loading, error }) =>
                    loading ? (
                      "Loading document..."
                    ) : (
                      <button
                        type="button"
                        className="defaultBtn certificateBtn"
                        style={{
                          display: "flex",
                          flexDirection: "row",
                          alignItems: "center",
                        }}
                      >
                        <i
                          class="fa fa-certificate"
                          style={{
                            color: "white",
                            fontSize: "15px",
                            marginRight: "3px",
                          }}
                          aria-hidden="true"
                        ></i>
                        Certificate
                      </button>
                    )
                  }
                </PDFDownloadLink>
              )}
              <button
                onClick={handleToPrint}
                type="button"
                className="defaultBtn printBtn"
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                }}
              >
                <i
                  class="fa fa-print"
                  style={{
                    fontSize: "15px",
                    marginRight: "3px",
                    color: "white",
                  }}
                  aria-hidden="true"
                ></i>
                Print
              </button>

              <button
                type="button"
                className="defaultBtn downloadBtn"
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                }}
                onClick={() => handleDownloadPdf()}
              >
                <i
                  className="fa fa-download"
                  style={{
                    color: "white",
                    fontSize: "15px",
                    marginRight: "3px",
                  }}
                  aria-hidden="true"
                ></i>
                Download
              </button>
            </div>
          ) : (
            <div>
              <button
                onClick={() => {
                  navigate(-1);
                }}
                type="button"
                className="defaultBtn backBtn"
              >
                Back
              </button>
              {currentSigner && (
                <>
                  <button
                    style={{
                      background: "#de4337",
                    }}
                    className="finishBtn hoverCss"
                    onClick={() => {
                      handleDeclinePdfAlert();
                    }}
                  >
                    Decline
                  </button>
                  <button
                    style={{
                      background: "#188ae2",
                    }}
                    type="button"
                    className="finishBtn sendHover"
                    onClick={() => {
                      embedImages();
                    }}
                  >
                    Finish
                  </button>
                </>
              )}
            </div>
          )
        ) : (
          <div>
            <button
              onClick={() => {
                navigate(-1);
              }}
              type="button"
              className="defaultBtn backBtn"
            >
              Back
            </button>

            <button
              style={{
                background: "#188ae2",
              }}
              type="button"
              className="finishBtn sendHover"
              onClick={() => {
                if (!pdfUrl) {
                  embedImages();
                }
              }}
            >
              Finish
            </button>
          </div>
        )}
      </div>
      {isMobile && isShowHeader && (
        <div
          id="navbar"
          className="stickyHead"
          style={{ width: window.innerWidth - 30 + "px" }}
        >
          <div className="preBtn2">
            <div
              onClick={() => {
                navigate(-1);
              }}
            >
              <i
                className="fa fa-arrow-left"
                aria-hidden="true"
                style={{ color: themeColor(), cursor: "pointer" }}
              ></i>
            </div>
            <div>
              <i
                onClick={() => {
                  if (pageNumber > 1) {
                    previousPage();
                  }
                }}
                className="fa fa-backward"
                style={{ color: "gray", cursor: "pointer" }}
              ></i>
              <span
                style={{
                  fontSize: "13px",
                  fontWeight: "600",
                  marginLeft: "10px",
                  marginRight: "10px",
                }}
              >
                {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
              </span>
              <i
                onClick={() => {
                  if (pageNumber < allPages) {
                    nextPage();
                  }
                }}
                className="fa fa-forward"
                style={{ color: "gray", cursor: "pointer" }}
              ></i>
            </div>
            {pdfUrl ? (
              <DropdownMenu.Root>
                <DropdownMenu.Trigger asChild>
                  <div
                    // onClick={() => handleDownloadPdf()}
                    style={{
                      color: themeColor(),
                      border: "none",
                      fontWeight: "650",
                      fontSize: "16px",
                    }}
                  >
                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                  </div>
                </DropdownMenu.Trigger>

                <DropdownMenu.Portal>
                  <DropdownMenu.Content
                    className="DropdownMenuContent"
                    sideOffset={5}
                  >
                    <DropdownMenu.Item
                      className="DropdownMenuItem"
                      onClick={() => handleDownloadPdf()}
                    >
                      <div
                        style={{
                          display: "flex",
                          flexDirection: "row",
                        }}
                      >
                        <i class="fa fa-arrow-down" aria-hidden="true" style={{marginRight:"2px"}}></i>
                        Download
                      </div>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item className="DropdownMenuItem">
                      <PDFDownloadLink
                        document={<Certificate pdfData={pdfDetails} />}
                        fileName={`completion certificate-${
                          pdfDetails[0] && pdfDetails[0].Name
                        }.pdf`}
                      >
                        {({ blob, url, loading, error }) =>
                        <>
                        {console.log("error",error)}
                        {loading ? (
                            "Loading document..."
                          ) : (
                            <div
                              style={{
                                display: "flex",
                                flexDirection: "row",
                              }}
                            >
                              <i
                                class="fa fa-certificate"
                                style={{
                                  fontSize: "15px",
                                  marginRight: "3px",
                                }}
                                aria-hidden="true"
                              ></i>
                              Certificate
                            </div>
                          )}
                        </>
                          
                        }
                      </PDFDownloadLink>
                    </DropdownMenu.Item>
                  </DropdownMenu.Content>
                </DropdownMenu.Portal>
              </DropdownMenu.Root>
            ) : (
              <div style={{ display: "flex", justifyContent: "space-around" }}>
                {/* current signer is checking user send request and check status of pdf sign than if current 
                user exist than show finish button else no
                */}
                {currentSigner && (
                  <>
                    {decline && (
                      <div
                        onClick={() => {
                          handleDeclinePdfAlert();
                        }}
                        style={{
                          color: "red",
                          border: "none",
                          fontWeight: "650",
                          fontSize: "16px",
                          marginRight: "10px",
                        }}
                      >
                        Decline
                      </div>
                    )}
                    {isPlaceholder ?(
                      <div
                      onClick={() => {
                        alertSendEmail();
                      }}
                      style={{
                        color: themeColor(),
                        border: "none",
                        fontWeight: "650",
                        fontSize: "16px",
                      }}
                    >
                     Send
                    </div>
                    ):(
                      <div
                      onClick={() => {
                        if (!pdfUrl) {
                          embedImages();
                        }
                      }}
                      style={{
                        color: themeColor(),
                        border: "none",
                        fontWeight: "650",
                        fontSize: "16px",
                      }}
                    >
                      Finish
                    </div>
                    )}
                     
                  </>
                )}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

export default Header;