import { Breakpoints , breakpointsOrder , ThemeInterface } from '@bigcommerce/big-design-theme' ; import { css , FlattenSimpleInterpolation } from 'styled-components' ; import { FlexedItemProps , FlexedOverload , FlexedProps } from './types' ; export const withFlexedContainer = ( ) => css < FlexedProps > `
  ${ ( { alignContent , theme } ) => alignContent && getFlexedStyles ( alignContent , theme , 'align-content' ) };
  ${ ( { alignItems , theme } ) => alignItems && getFlexedStyles ( alignItems , theme , 'align-items' ) };
  ${ ( { flexDirection , theme } ) => flexDirection && getFlexedStyles ( flexDirection , theme , 'flex-direction' ) };
  ${ ( { flexWrap , theme } ) => flexWrap && getFlexedStyles ( flexWrap , theme , 'flex-wrap' ) };
  ${ ( { justifyContent , theme } ) => justifyContent && getFlexedStyles ( justifyContent , theme , 'justify-content' ) };
` ; export const withFlexedItems = ( ) => css < FlexedItemProps > `
  ${ ( { alignSelf , theme } ) => alignSelf && getFlexedStyles ( alignSelf , theme , 'align-self' ) };
  ${ ( { flexBasis , theme } ) => flexBasis && getFlexedStyles ( flexBasis , theme , 'flex-basis' ) };
  ${ ( { flexGrow , theme } ) => typeof flexGrow !== 'undefined' && getFlexedStyles ( flexGrow , theme , 'flex-grow' ) };
  ${ ( { flexOrder , theme } ) => typeof flexOrder !== 'undefined' && getFlexedStyles ( flexOrder , theme , 'order' ) };
  ${ ( { flexShrink , theme } ) => typeof flexShrink !== 'undefined' && getFlexedStyles ( flexShrink , theme , 'flex-shrink' ) };
` ; const getFlexedStyles = ( flexedProp , theme , cssKey ) : FlattenSimpleInterpolation => { if ( typeof flexedProp === 'object' ) { return getResponsiveFlex ( flexedProp , theme , cssKey ) ; } if ( typeof flexedProp === 'string' || typeof flexedProp === 'number' ) { return getSimpleFlex ( flexedProp , cssKey ) ; } return [ ] ; } ; const getSimpleFlex = ( flexedProp , cssKey ) : FlattenSimpleInterpolation => css `
  ${ cssKey }: ${ flexedProp }
` ; const getResponsiveFlex = ( flexedProp , theme , cssKey ) : FlattenSimpleInterpolation [ ] => { const breakpointKeys = Object . keys ( flexedProp ) . sort ( ( firstBreakpoint , secondBreakpoint ) => breakpointsOrder . indexOf ( firstBreakpoint as keyof Breakpoints ) - breakpointsOrder . indexOf ( secondBreakpoint as keyof Breakpoints ) ) ; return ( breakpointKeys as Array < keyof Breakpoints > ) . map ( ( breakpointKey ) => css `
        ${ theme . breakpoints [ breakpointKey ] } {
          ${ getSimpleFlex ( flexedProp [ breakpointKey ] , cssKey ) }
        }
      ` ) ; } ;