import { h } from "@stencil/core";
import { createStyleSheet } from "../../../../styling/JSS";
import { useCallback, useEffect, useState, } from "@saasquatch/universal-hooks";
import { DOCUSIGN_EXPIRED_STATES, DOCUSIGN_ERROR_STATES, } from "../useDocusignForm";
const style = {
  DocusignStatusContainer: {
    width: "100%",
    minHeight: "600px",
    height: "900px",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "20px",
    gap: "10px",
    margin: "auto",
    textAlign: "center",
    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
    justifyContent: "center",
  },
  MessageContainer: {
    maxWidth: "400px",
  },
  IFrameContainer: {
    "@media screen and (max-width: 440px)": {
      position: "absolute",
      width: "100vw",
      left: "-30px",
      zIndex: "9999",
    },
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export const DocusignExpiredView = (props) => {
  const { classes } = sheet;
  const { text } = props;
  return (h("div", null,
    h("style", { type: "text/css" }, styleString),
    h("div", { class: classes.DocusignStatusContainer },
      h("sl-icon", { style: {
          width: "50px",
          height: "50px",
          color: "var(--sqm-text)",
        }, name: "clock" }),
      h("div", { class: classes.MessageContainer },
        h("p", { style: { margin: "0" } }, text.docusignExpired)),
      h("sl-button", { type: "primary", onClick: () => window.location.reload() }, text.refreshButton))));
};
export const DocusignErrorView = (props) => {
  const { classes } = sheet;
  const { text } = props;
  return (h("div", null,
    h("style", { type: "text/css" }, styleString),
    h("div", { class: classes.DocusignStatusContainer },
      h("sl-icon", { style: {
          width: "50px",
          height: "50px",
          color: "var(--sqm-text)",
        }, name: "exclamation-octagon" }),
      h("div", { class: classes.MessageContainer },
        h("p", { style: { margin: "0" } }, text.docusignError)),
      h("sl-button", { type: "primary", onClick: () => window.location.reload() }, text.refreshButton))));
};
export const DocusignLoadingView = () => {
  const { classes } = sheet;
  return (h("div", null,
    h("style", { type: "text/css" }, styleString),
    h("div", { class: classes.DocusignStatusContainer },
      h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } }))));
};
export const DocusignIframe = ({ states, data, callbacks, text, }) => {
  const { classes } = sheet;
  const [iFrameHeight, setiFrameHeight] = useState("100%");
  const allowedDomains = [
    "referralsaasquatch.com",
    "impacttech.complysandbox.com",
    "impacttech.complytaxforms.com",
  ];
  const callback = useCallback((e) => {
    const allowed = allowedDomains.some((d) => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.includes(d); });
    if (!allowed)
      return;
    if (typeof e.data === "number") {
      setiFrameHeight(e.data + "px");
    }
    if (e.data === "Complyexchange Thank you page Load" && !states.loading) {
      callbacks.completeDocument();
    }
  }, []);
  useEffect(() => {
    window.addEventListener("message", callback, false);
    return () => {
      window.removeEventListener("message", callback, false);
    };
  }, [iFrameHeight]);
  if (states.urlLoading)
    return h(DocusignLoadingView, null);
  if (DOCUSIGN_ERROR_STATES.includes(states.status)) {
    return h(DocusignErrorView, { text: text });
  }
  if (DOCUSIGN_EXPIRED_STATES.includes(states.status))
    return h(DocusignExpiredView, { text: text });
  // Wrap iFrame with container that shares the same height to push other elements down when absolute positioned
  return (h("div", { style: { height: iFrameHeight } },
    h("style", { type: "text/css" }, styleString),
    h("div", { class: classes.IFrameContainer },
      h("iframe", { scrolling: "yes", frameBorder: "0", width: "100%", src: data.documentUrl, height: iFrameHeight }))));
};
