import { jsx, jsxs } from "react/jsx-runtime";
import { Children } from "react";
import { flattenChildren } from "../Accordion/AccordionItem.mjs";
import assert from "assert";
import { Box } from "../Box/Box.mjs";
import { Divider } from "../Divider/Divider.mjs";
import { Hidden, resolveResponsiveRangeProps } from "../Hidden/Hidden.mjs";
import { hiddenOnPrint } from "../Hidden/Hidden.css.mjs";
import { alignToFlexAlign } from "../../utils/align.mjs";
import { optimizeResponsiveArray } from "../Column/Column.mjs";
import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
import { mapResponsiveValue, normalizeResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
import { buildDataAttributes } from "../Accordion/Accordion.mjs";
const alignToDisplay = {
  left: "block",
  center: "flex",
  right: "flex"
};
const validStackComponents = ["div", "span", "ol", "ul"];
const useStackItem = ({ align, space, component }) => ({
  paddingTop: space,
  display: component === "span" ? "block" : void 0,
  // If we're aligned left across all screen sizes,
  // there's actually no alignment work to do.
  ...align === "left" ? null : {
    display: mapResponsiveValue(align, (value) => alignToDisplay[value]),
    flexDirection: "column",
    alignItems: alignToFlexAlign(align)
  }
});
const extractHiddenPropsFromChild = (child) => child && typeof child === "object" && "type" in child && child.type === Hidden ? child.props : null;
const resolveHiddenProps = ({ screen, above, below }) => screen ? [true, true, true, true] : resolveResponsiveRangeProps({
  above,
  below
});
const calculateHiddenStackItemProps = (stackItemProps, [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide]) => {
  const normalizedValue = normalizeResponsiveValue(
    stackItemProps.display !== void 0 ? stackItemProps.display : "block"
  );
  const {
    mobile: displayMobile = "block",
    tablet: displayTablet = displayMobile,
    desktop: displayDesktop = displayTablet,
    wide: displayWide = displayDesktop
  } = normalizedValue;
  return {
    ...stackItemProps,
    display: optimizeResponsiveArray([
      hiddenOnMobile ? "none" : displayMobile,
      hiddenOnTablet ? "none" : displayTablet,
      hiddenOnDesktop ? "none" : displayDesktop,
      hiddenOnWide ? "none" : displayWide
    ])
  };
};
const Stack = ({
  component = "div",
  children,
  space = "none",
  align = "left",
  dividers = false,
  data,
  ...restProps
}) => {
  assert(
    validStackComponents.includes(component),
    `Invalid Stack component: '${component}'. Should be one of [${validStackComponents.map((c) => `'${c}'`).join(", ")}]`
  );
  const stackItemProps = useStackItem({ space, align, component });
  const stackItems = flattenChildren(children);
  const isList = component === "ol" || component === "ul";
  const stackItemComponent = isList ? "li" : component;
  let firstItemOnMobile = null;
  let firstItemOnTablet = null;
  let firstItemOnDesktop = null;
  let firstItemOnWide = null;
  return /* @__PURE__ */ jsx(
    Box,
    {
      component,
      display: component === "span" ? "block" : void 0,
      className: negativeMargin("top", space),
      ...buildDataAttributes({ data, validateRestProps: restProps }),
      children: Children.map(stackItems, (child, index) => {
        assert(
          !(typeof child === "object" && child.type === Hidden && child.props.inline !== void 0),
          'The "inline" prop is invalid on Hidden elements within a Stack'
        );
        const hiddenProps = extractHiddenPropsFromChild(child);
        const hidden = hiddenProps ? resolveHiddenProps(hiddenProps) : [false, false, false, false];
        const [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide] = hidden;
        const responsivelyHidden = hiddenOnMobile || hiddenOnTablet || hiddenOnDesktop || hiddenOnWide;
        if (firstItemOnMobile === null && !hiddenOnMobile) {
          firstItemOnMobile = index;
        }
        if (firstItemOnTablet === null && !hiddenOnTablet) {
          firstItemOnTablet = index;
        }
        if (firstItemOnDesktop === null && !hiddenOnDesktop) {
          firstItemOnDesktop = index;
        }
        if (firstItemOnWide === null && !hiddenOnWide) {
          firstItemOnWide = index;
        }
        return /* @__PURE__ */ jsxs(
          Box,
          {
            component: stackItemComponent,
            className: [
              hiddenProps && hiddenProps.print ? hiddenOnPrint : null
            ],
            ...responsivelyHidden ? calculateHiddenStackItemProps(stackItemProps, hidden) : stackItemProps,
            children: [
              dividers && index > 0 ? /* @__PURE__ */ jsx(
                Box,
                {
                  component: "span",
                  width: "full",
                  paddingBottom: space,
                  display: optimizeResponsiveArray([
                    index === firstItemOnMobile ? "none" : "block",
                    index === firstItemOnTablet ? "none" : "block",
                    index === firstItemOnDesktop ? "none" : "block",
                    index === firstItemOnWide ? "none" : "block"
                  ]),
                  children: typeof dividers === "string" ? /* @__PURE__ */ jsx(Divider, { weight: dividers }) : /* @__PURE__ */ jsx(Divider, {})
                }
              ) : null,
              hiddenProps ? hiddenProps.children : child
            ]
          }
        );
      })
    }
  );
};
export {
  Stack,
  validStackComponents
};
