import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { isMobile, isValidColor } from "../../utilities";
import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
const paddingList = [
  "var(--sl-spacing-xxx-small)",
  "var(--sl-spacing-xx-small)",
  "var(--sl-spacing-x-small)",
  "var(--sl-spacing-small)",
  "var(--sl-spacing-medium)",
  "var(--sl-spacing-large)",
  "var(--sl-spacing-x-large)",
  "var(--sl-spacing-xx-large)",
  "var(--sl-spacing-xxx-large)",
  "var(--sl-spacing-xxxx-large)",
];
const parseBackground = (provided_bg) => {
  if (provided_bg) {
    if (isValidColor(provided_bg)) {
      return provided_bg;
    }
    else {
      return `url(${optimizeCloudinaryUrl(provided_bg)})`;
    }
  }
  else {
    return "var(--sqm-portal-background)";
  }
};
export function HeroView(props) {
  const { states, content } = props;
  const { secondaryBackground = "var(--sqm-portal-background)" } = states;
  const getVertivalPadding = (size, half) => {
    const sizes = {
      small: 7,
      medium: 8,
      large: 9,
    };
    var index = sizes[size];
    if (isMobile(650)) {
      index = index - 2;
    }
    else if (isMobile(767)) {
      index = index - 1;
    }
    return half ? paddingList[index - 2] : paddingList[index];
  };
  const getHorizontalPadding = (size) => {
    if (size == "small") {
      return "1%";
    }
    else if (size == "medium") {
      return "3%";
    }
    else {
      return "5%";
    }
  };
  // Dependent on props, not feasiable to move out
  const style = {
    TwoColumnContainer: {
      display: "flex",
      "@media screen and (max-width: 650px)": {
        flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
        justfiyContent: "center",
      },
    },
    ColumnPadding: {
      paddingTop: states.paddingSize == "none"
        ? "0px"
        : getVertivalPadding(states.paddingSize),
      paddingBottom: states.paddingSize == "none"
        ? "0px"
        : getVertivalPadding(states.paddingSize),
      paddingLeft: states.paddingSize == "none"
        ? "0px"
        : getHorizontalPadding(states.paddingSize),
      paddingRight: states.paddingSize == "none"
        ? "0px"
        : getHorizontalPadding(states.paddingSize),
    },
    ColumnWrapper: {
      "&:first-of-type": {
        background: `no-repeat center/cover ${parseBackground(states.background)}`,
      },
      "&:last-of-type": {
        background: `no-repeat center/cover ${parseBackground(secondaryBackground)}`,
      },
      "@media screen and (min-width: 650px)": { flex: "1 1 0" },
      minHeight: `${states.minHeight}px`,
      display: "block",
    },
    HideColumn: {
      "@media screen and (max-width: 650px)": { display: "none" },
    },
    SingleColumnContainer: {
      background: `no-repeat center/cover ${parseBackground(states.background)}`,
      minHeight: `${states.minHeight}px`,
    },
    Container: {
      width: "100%",
      maxWidth: "var(--sqm-max-width)",
      margin: "0 auto",
      flex: 1,
      display: "flex",
      flexDirection: "column",
      minHeight: "100%",
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const vanillaStyle = `
  :host{    
    height: 100%;
    display: contents;
  }
  sqm-hero{    
    height: 100%;
    display: contents;
  }
  img{
      max-width: 100%;
      height: auto;
  }
  
`;
  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
      h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding} ${states.columnToHideInMobile === "primary"
          ? sheet.classes.HideColumn
          : ""}` }, content.primaryColumn),
      h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding} ${states.columnToHideInMobile === "secondary"
          ? sheet.classes.HideColumn
          : ""}` }, content.secondaryColumn))) : (h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
}
