import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { intl } from "../../global/global";
import { PoweredByImg } from "./PoweredByImg";
const vanillaStyle = `
  :host {
    margin: 0 auto;
    width: 100%;
  }
  a {
    cursor:pointer;
    color: var(--sqm-text-subdued);
    text-decoration: none;
  }
`;
export function PortalFooterView(props) {
  const style = {
    RowContainer: {
      display: "flex",
      "& > :not(:last-child)": {
        "margin-right": "var(--sl-spacing-large)",
      },
    },
    Container: {
      display: "flex",
      "flex-direction": "column",
      "align-items": "center",
      "font-size": "var(--sl-font-size-small)",
      color: "var(--sqm-text-subdued)",
      "padding-top": `var(--sl-spacing-${props.paddingTop})`,
      "padding-right": `var(--sl-spacing-${props.paddingRight})`,
      "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
      "padding-left": `var(--sl-spacing-${props.paddingLeft})`,
      "row-gap": `var(--sl-spacing-small)`,
      "& a:hover": {
        color: "var(--sqm-text)",
      },
    },
    SupportText: {
      textAlign: "center",
      margin: 0,
    },
    PoweredByLink: {
      color: "var(--sqm-text-subdued)",
      "font-size": "var(--sl-font-size-small)",
      display: "flex",
      alignItems: "center",
      svg: {
        marginTop: "2px",
        shapeRendering: "geometricprecision",
      },
      "&:hover, &:hover *": {
        color: "var(--sqm-text)",
      },
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    h("div", { class: sheet.classes.RowContainer },
      props.faqLink && (h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
      props.termsLink && (h("a", { target: "_blank", href: props.termsLink }, props.termsText))),
    !props.hideSupportText && (h("p", { class: sheet.classes.SupportText }, intl.formatMessage({
      id: "supportFooter",
      defaultMessage: props.supportText,
    }, {
      email: (h("a", { target: "_blank", href: `mailto:${props.supportEmail}` }, props.supportEmail)),
    }))),
    !props.hidePoweredBy && (h("a", { class: sheet.classes.PoweredByLink, target: "_blank", href: props.poweredByLink },
      "Powered by ",
      h(PoweredByImg, { color: "currentColor" })))));
}
