import styled from "../styles/styled";
import createComponentFactory from "@suid/base/createComponentFactory";
import { handleBreakpoints, resolveBreakpointValues, } from "@suid/system";
import mergeSxObjects from "@suid/system/mergeSxObjects";
import { createUnarySpacing } from "@suid/system/spacing";
import extendSxProp from "@suid/system/styleFunctionSx/extendSxProp";
import { Show } from "solid-js";
const $ = createComponentFactory()({
    name: "MuiStack",
    selfPropNames: ["children", "direction", "divider", "spacing"],
    propDefaults: ({ set }) => set({
        component: "div",
        direction: "column",
        spacing: 0,
    }),
});
function joinChildren(children, separator) {
    const childrenArray = (Array.isArray(children) ? children : [children]).filter(Boolean);
    return childrenArray.reduce((output, child, index) => {
        output.push(child);
        if (index < childrenArray.length - 1) {
            output.push(separator());
        }
        return output;
    }, []);
}
const getSideFromDirection = (direction) => {
    return {
        row: "Left",
        "row-reverse": "Right",
        column: "Top",
        "column-reverse": "Bottom",
    }[direction];
};
const StackRoot = styled("div", {
    name: "MuiStack",
    slot: "Root",
    overridesResolver: (props, styles) => {
        return [styles.root];
    },
})(({ theme, ownerState }) => {
    let styles = {
        display: "flex",
        ...handleBreakpoints({ theme }, resolveBreakpointValues({
            values: ownerState.direction,
            breakpoints: theme.breakpoints.values,
        }), (propValue) => ({
            flexDirection: propValue,
        })),
    };
    if (ownerState.spacing) {
        const transformer = createUnarySpacing(theme);
        const base = theme.breakpoints.keys.reduce((acc, breakpoint) => {
            if (ownerState.spacing[breakpoint] != null ||
                ownerState.direction[breakpoint] != null) {
                acc[breakpoint] = true;
            }
            return acc;
        }, {});
        const directionValues = resolveBreakpointValues({
            values: ownerState.direction,
            base,
        });
        const spacingValues = resolveBreakpointValues({
            values: ownerState.spacing,
            base,
        });
        const styleFromPropValue = (propValue, breakpoint) => {
            return {
                "& > :not(style) + :not(style)": {
                    margin: 0,
                    [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: transformer(propValue),
                },
            };
        };
        styles = mergeSxObjects(styles, handleBreakpoints({ theme }, spacingValues, styleFromPropValue));
    }
    return styles;
});
/**
 *
 * Demos:
 *
 * - [Stack](https://mui.com/components/stack/)
 *
 * API:
 *
 * - [Stack API](https://mui.com/api/stack/)
 */
const Stack = $.component(function Stack({ allProps, otherProps, props }) {
    otherProps = extendSxProp(otherProps);
    return (<StackRoot as={otherProps.component} ownerState={allProps} {...otherProps}>
      <Show when={props.divider} fallback={props.children}>
        {joinChildren(props.children, () => props.divider)}
      </Show>
    </StackRoot>);
});
export default Stack;