import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { ErrorView } from "../tax-and-cash/sqm-tax-and-cash/ErrorView";
const style = {
  DialogContainer: {
    maxWidth: "390px !important",
  },
  Container: {
    width: "100%",
    display: "flex",
    flexDirection: "row",
    gap: "var(--sl-spacing-small)",
  },
  TextContainer: {
    display: "flex",
    gap: "var(--sl-spacing-medium)",
    flexDirection: "column",
    alignItems: "center",
  },
  ButtonContainer: {
    display: "flex",
    gap: "var(--sl-spacing-medium)",
  },
  FooterContainer: {
    textAlign: "left",
    display: "flex",
    flexDirection: "column",
    gap: "var(--sl-spacing-medium)",
  },
  CodeContainer: {
    display: "flex",
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  Code: {
    width: "100%",
    height: "100%",
    maxWidth: "335px",
  },
  LoadingSkeleton: {
    "&::part(indicator)": {
      borderRadius: "0px !important",
    },
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
const vanillaStyle = `
  :host{
    display: flex;
    width: 100%;
  }
  @media (max-width: 499px) {
    :host{
      display: block;
    }

  }`;
export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCodeText, errorHeaderText, errorDescriptionText, createDownloadable, createPrintable, hideTitle, alignment, loading, }) {
  const codeAlignment = alignment === "left"
    ? "flex-start"
    : alignment === "right"
      ? "flex-end"
      : "center";
  const getCodeContent = (error, qrLink, loading) => {
    if (error) {
      return (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText }));
    }
    else if (loading) {
      return h("sqm-skeleton", { height: "100px", width: "100px" });
    }
    else if (qrLink) {
      return (h("svg", { width: "100", height: "100" },
        h("image", { href: qrLink, width: "100", height: "100" })));
    }
    return null;
  };
  const codeContent = getCodeContent(error, qrLink, loading);
  return (h("div", { class: sheet.classes.Container, style: { justifyContent: codeAlignment }, part: "sqm-base" },
    h("style", null, vanillaStyle),
    h("style", null, styleString),
    h("div", { class: sheet.classes.TextContainer, style: { alignItems: codeAlignment } },
      !hideTitle && h("span", { part: "sqm-title" }, titleText),
      codeContent,
      h("div", { class: sheet.classes.ButtonContainer },
        h("sl-button", { loading: loading, size: "small", exportparts: "base: primarybutton-base", type: "primary", onClick: createDownloadable }, downloadCodeText),
        h("sl-button", { loading: loading, size: "small", exportparts: "base: secondarybutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
}
