import { Children } from "react";
import { normalizeResponsiveValue } from "../css/atoms/sprinkles.css.mjs";
import { resolveResponsiveRangeProps } from "../components/Hidden/Hidden.mjs";
import { optimizeResponsiveArray } from "../components/Column/Column.mjs";
import { alignToFlexAlign, alignYToFlexAlign } from "./align.mjs";
function invertAlignment(alignment) {
  if (alignment === "flexStart") {
    return "flexEnd";
  }
  if (alignment === "flexEnd") {
    return "flexStart";
  }
  return alignment;
}
function resolveCollapsibleAlignmentProps({
  align,
  alignY,
  collapseBelow,
  reverse
}) {
  const [collapseMobile, collapseTablet, collapseDesktop] = resolveResponsiveRangeProps({
    below: collapseBelow
  });
  const rowReverseTablet = collapseMobile && reverse;
  const rowReverseDesktop = (collapseMobile || collapseTablet) && reverse;
  const rowReverseWide = (collapseMobile || collapseTablet || collapseDesktop) && reverse;
  const normalizedAlign = normalizeResponsiveValue(
    alignToFlexAlign(align) || "flexStart"
  );
  const {
    mobile: justifyContentMobile = "flexStart",
    tablet: justifyContentTablet = justifyContentMobile,
    desktop: justifyContentDesktop = justifyContentTablet,
    wide: justifyContentWide = justifyContentDesktop
  } = normalizedAlign;
  return {
    collapseMobile,
    collapseTablet,
    collapseDesktop,
    orderChildren: (children) => {
      const childrenArray = Children.toArray(children);
      return !collapseMobile && !collapseTablet && reverse ? childrenArray.reverse() : childrenArray;
    },
    collapsibleAlignmentProps: {
      display: optimizeResponsiveArray([
        collapseMobile ? "block" : "flex",
        collapseTablet ? "block" : "flex",
        collapseDesktop ? "block" : "flex",
        "flex"
      ]),
      flexDirection: optimizeResponsiveArray([
        collapseMobile ? "column" : "row",
        // eslint-disable-next-line no-nested-ternary
        collapseTablet ? "column" : rowReverseTablet ? "rowReverse" : "row",
        // eslint-disable-next-line no-nested-ternary
        collapseDesktop ? "column" : rowReverseDesktop ? "rowReverse" : "row",
        rowReverseWide ? "rowReverse" : "row"
      ]),
      justifyContent: align ? optimizeResponsiveArray([
        justifyContentMobile,
        rowReverseTablet ? invertAlignment(justifyContentTablet) : justifyContentTablet,
        rowReverseDesktop ? invertAlignment(justifyContentDesktop) : justifyContentDesktop,
        rowReverseWide ? invertAlignment(justifyContentWide) : justifyContentWide
      ]) : void 0,
      alignItems: alignY ? alignYToFlexAlign(alignY) : void 0
    },
    collapsibleAlignmentChildProps: {
      display: optimizeResponsiveArray([
        collapseMobile && justifyContentMobile !== "flexStart" ? "flex" : "block",
        collapseTablet && justifyContentTablet !== "flexStart" ? "flex" : "block",
        collapseDesktop && justifyContentDesktop !== "flexStart" ? "flex" : "block",
        "block"
      ]),
      justifyContent: optimizeResponsiveArray([
        justifyContentMobile,
        justifyContentTablet,
        justifyContentDesktop,
        justifyContentWide
      ])
    }
  };
}
export {
  resolveCollapsibleAlignmentProps
};
