import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
const prefix = (value) => {
    if (['between', 'around', 'evenly'].includes(value))
        return `space-${value}`;
    if (['start', 'end'].includes(value))
        return `flex-${value}`;
    return value;
};
const getLogicalPadding = (pad) => {
    if (!Array.isArray(pad)) {
        return [pad, pad, pad, pad];
    }
    switch (pad.length) {
        case 1:
            return [pad[0], pad[0], pad[0], pad[0]];
        case 2:
            return [pad[0], pad[1], pad[0], pad[1]];
        case 3:
            return [pad[0], pad[1], pad[2], pad[1]];
        case 4:
            return pad;
        default:
            return [undefined, undefined, undefined, undefined];
    }
};
const getContainerStyles = (container, spacing) => {
    if (!container)
        return '';
    if (container === true) {
        return css `
      display: flex;
    `;
    }
    const paddingConfig = getLogicalPadding(container.pad);
    if (container && typeof container === 'object') {
        const isRow = !container.direction || container.direction.includes('row');
        const isReverse = container.direction && container.direction.includes('reverse');
        return css `
      display: ${container.inline ? 'inline-flex' : 'flex'};

      ${paddingConfig[0] !== undefined &&
            css `
        padding-block-start: calc(${paddingConfig[0]} * ${spacing});
      `}
      ${paddingConfig[1] !== undefined &&
            css `
        padding-inline-end: calc(${paddingConfig[1]} * ${spacing});
      `}

        ${paddingConfig[2] !== undefined &&
            css `
        padding-block-end: calc(${paddingConfig[2]} * ${spacing});
      `}

        ${paddingConfig[3] !== undefined &&
            css `
        padding-inline-start: calc(${paddingConfig[3]} * ${spacing});
      `}

      ${container.direction &&
            css `
        flex-direction: ${container.direction};
      `}

      ${container.justify &&
            css `
        justify-content: ${prefix(container.justify)};
      `}

      ${container.wrap &&
            css `
        flex-wrap: ${container.wrap};
      `}

      ${container.alignItems &&
            css `
        align-items: ${prefix(container.alignItems)};
      `}

      ${container.alignContent &&
            css `
        align-content: ${prefix(container.alignContent)};
      `}

      ${container.itemGap &&
            css `
          > * {
            margin-${isRow ? 'inline-start' : 'block-start'}: calc(${container.itemGap} * ${props => props.theme.base.spacing});
            ${isReverse ? '&:last-child' : '&:first-child'} {
              margin-${isRow ? 'inline-start' : 'block-start'}: 0;
            }
          }
        `}

      ${container.gap !== undefined &&
            css `
        gap: calc(${container.gap} * ${props => props.theme.base.spacing});
      `}

      ${container.colGap !== undefined &&
            css `
        column-gap: calc(${container.colGap} * ${props => props.theme.base.spacing});
      `}

      ${container.rowGap !== undefined &&
            css `
        row-gap: calc(${container.rowGap} * ${props => props.theme.base.spacing});
      `}
    `;
    }
};
const getItemStyles = (item) => {
    return css `
    ${item &&
        css `
      max-width: 100%;
      min-width: 0;

      ${item.grow !== undefined &&
            css `
        flex-grow: ${item.grow};
      `}

      ${item.shrink !== undefined &&
            css `
        flex-shrink: ${item.shrink};
      `}

      ${item.alignSelf &&
            css `
        align-self: ${prefix(item.alignSelf)};
      `}

      ${item.basis &&
            css `
        flex-basis: ${item.basis};
      `}
    `}
  `;
};
const breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'];
export const StyledFlex = styled.div(({ container, item, theme: { base: { breakpoints: themeBreakpoints, spacing } }, xs, sm, md, lg, xl }) => {
    const breakpoints = {
        xs,
        sm,
        md,
        lg,
        xl
    };
    return css `
      ${getContainerStyles(container, spacing)}
      ${getItemStyles(item)}

    ${breakpointOrder.map(breakpoint => breakpoints[breakpoint] &&
        css `
            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {
              ${getContainerStyles(breakpoints[breakpoint]?.container, spacing)}
              ${getItemStyles(breakpoints[breakpoint]?.item)}
            }
          `)}
    `;
});
StyledFlex.defaultProps = defaultThemeProp;
const Flex = forwardRef(function Flex(props, ref) {
    return _jsx(StyledFlex, { ...props, ref: ref });
});
export default Flex;
//# sourceMappingURL=Flex.js.map