import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
export function StatContainerView(props, children) {
  const divideSpace = () => {
    const spaceValue = getComputedStyle(document.documentElement).getPropertyValue(`--sl-spacing-${props.space}`);
    return `${Math.floor(parseInt(spaceValue) / 2)}rem`;
  };
  // take alignment variable and convert it to CSS flexbox alignment
  const alignment = props.alignment === "center"
    ? "center"
    : props.alignment === "right"
      ? "flex-end"
      : "flex-start";
  // Dependent on props, not feasible to move out
  const style = {
    StatContainer: {
      width: "100%",
      display: "flex",
      flexWrap: "wrap",
      alignItems: "center",
      justifyContent: alignment,
      flexDirection: "row",
      gap: `var(--sl-spacing-${props.gap})`,
      // Apply border styles conditionally based on the hideBorder prop
      "& > *": {
        "border-right": props.hideBorder
          ? "none"
          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
        "padding-right": divideSpace(),
      },
      "& > :last-child": {
        "border-right": "none",
      },
      "& > ::slotted(*)": {
        "border-right": props.hideBorder
          ? "none"
          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
        "padding-right": divideSpace(),
      },
      "& > ::slotted(*:last-child)": {
        "border-right": "none",
      },
      "@media screen and (max-width: 430px)": {
        "& > ::slotted(*)": {
          borderRight: "none",
        },
      },
    },
    StatFrame: {
      display: "flex",
    },
    BorderFix: {
      "border-right": "var(--sqm-border-thickness) solid transparent",
      width: "0px",
      "margin-left": "-1px",
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { class: sheet.classes.StatFrame, part: "sqm-base" },
    h("div", { class: sheet.classes.StatContainer, part: "sqm-inner-container" },
      h("style", { type: "text/css" }, styleString),
      children),
    h("div", { class: sheet.classes.BorderFix, part: "sqm-border" })));
}
