import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
export function HeroImageView(props, children) {
  const overlay = Boolean((props.header || props.description || props.buttonText) &&
    props.layout === "overlay");
  // Dependent on props, not feasiable to move out
  const style = {
    Container: {
      position: "relative",
      "&:before": {
        content: overlay ? '""' : "",
        width: "100%",
        height: "100%",
        position: "absolute",
        background: props.overlayColor || "var(--sl-color-black)",
        opacity: props.overlayOpacity,
      },
    },
    Image: {
      display: "block",
      width: "100%",
      height: "100%",
      objectFit: "cover",
    },
    Background: {
      backgroundImage: `url(${optimizeCloudinaryUrl(props.imageUrl)})`,
      backgroundSize: "cover",
      backgroundPosition: props.imagePos || "center",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    },
    Overlay: {
      zIndex: "1",
      padding: "calc(var(--sl-spacing-" +
        props.paddingText +
        ") + var(--sl-spacing-" +
        props.paddingImage +
        "))",
      textAlign: "center",
      color: props.textColor || "var(--sqm-text)",
      lineHeight: "var(--sl-line-height-dense)",
      "@media (max-width: 599px)": {
        padding: "var(--sl-spacing-" + props.paddingText + ")",
      },
    },
    Column: {
      display: "flex",
      background: props.backgroundColor || "",
      flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
      lineHeight: "var(--sl-line-height-dense)",
      color: props.textColor || "var(--sqm-text)",
      minHeight: props.minHeight ? props.minHeight + "px" : undefined,
      "& .image-area": {
        width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
        padding: "var(--sl-spacing-" + props.paddingImage + ")",
        boxSizing: "border-box",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        minHeight: props.minHeight ? props.minHeight + "px" : undefined,
        "@media (max-width: 599px)": {
          width: "100%",
        },
      },
      "& .text-area": {
        width: props.imagePercentage
          ? 100 - props.imagePercentage + "%"
          : "50%",
        padding: "var(--sl-spacing-" + props.paddingText + ")",
        alignSelf: "center",
        boxSizing: "border-box",
        "@media (max-width: 599px)": {
          width: "100%",
          textAlign: "center",
          padding: "calc(0.5*var(--sl-spacing-" + props.paddingText + "))",
        },
      },
      "@media (max-width: 599px)": {
        flexDirection: props.imageMobilePos === "bottom" ? "column-reverse" : "column",
      },
    },
    Header: {
      fontSize: "var(--sl-font-size-xxx-large)",
      fontWeight: "var(--sl-font-weight-bold)",
      "@media (max-width: 599px)": {
        fontSize: "var(--sl-font-size-xx-large)",
      },
    },
    Description: {
      fontSize: "var(--sl-font-size-x-large)",
      margin: "var(--sl-spacing-small) 0",
      "@media (max-width: 599px)": {
        fontSize: "var(--sl-font-size-large)",
      },
    },
    Button: {
      marginTop: "var(--sl-spacing-medium)",
      "&::part(base)": {
        padding: "0 var(--sl-spacing-x-large)",
        color: "var(--sqm-primary-button-color)",
        backgroundColor: "var(--sqm-primary-button-background)",
        border: "var(--sqm-primary-button-color-border)",
      },
      "@media (max-width: 599px)": {
        width: "100%",
      },
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const vanillaStyle = `
  :host{
    display: block;
  }`;
  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    props.layout === "overlay" && OverlayView(),
    props.layout === "columns" && ColumnView()));
  function OverlayView() {
    return (h("div", { class: sheet.classes.Background },
      h("div", { class: sheet.classes.Overlay, part: "sqm-overlay" },
        props.header && (h("div", { class: sheet.classes.Header }, props.header)),
        props.description && (h("div", { class: sheet.classes.Description }, props.description)),
        props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: `base: ${props.buttonType}button-base`, onClick: () => props.buttonNewTab
            ? window.open(props.buttonLink)
            : window.open(props.buttonLink, "_parent") }, props.buttonText)),
        children && children)));
  }
  function ColumnView() {
    return (h("div", null,
      h("div", { class: sheet.classes.Column },
        h("div", { class: "image-area" },
          h("img", { class: sheet.classes.Image, src: optimizeCloudinaryUrl(props.imageUrl), alt: props.imageAlt || "", loading: "eager", decoding: "async", 
            // @ts-ignore - fetchpriority is valid but not yet in JSX types
            fetchpriority: "high", part: "sqm-columns-image" })),
        h("div", { class: "text-area", part: "sqm-columns-text-area" },
          props.header && (h("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)),
          props.description && (h("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)),
          props.buttonText && (h("sl-button", { exportparts: "base: sqm-hero-image-button", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
              ? window.open(props.buttonLink)
              : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
  }
}
