// @flow
import componentryElem from '../elem-factory'
import withTheme from '../withTheme'

type Props = {
  /** Specify the flex direction of the container */
  direction?: '' | 'column' | 'column-reverse' | 'row' | 'row-reverse',
  /** Toggles between display flex and display inline-flex */
  inline?: boolean,
  /** Adds flexbox align-items atomic classes */
  align?: '' | 'start' | 'center' | 'end' | 'baseline' | 'stretch',
  /** Adds flexbox justify-content atomic classes */
  justify?: '' | 'start' | 'center' | 'end' | 'around' | 'between',
}

const Flex = ({
  align = '',
  direction = '',
  inline = false,
  justify = '',
  ...rest
}: Props) =>
  componentryElem({
    classes: {
      'd-flex': !inline,
      'd-inline-flex': inline,
      'flex-column': direction === 'column',
      'flex-column-reverse': direction === 'column-reverse',
      'flex-row': direction === 'row',
      'flex-row-reverse': direction === 'row-reverse',
      [`align-items-${align}`]: align,
      [`justify-content-${justify}`]: justify,
    },
    ...rest,
  })

export default withTheme('Flex', Flex)

@@ -165,17 +165,16 @@
 irection
-?
 : '' %7C '
@@ -295,17 +295,16 @@
   inline
-?
 : boolea
@@ -362,17 +362,16 @@
 %0A  align
-?
 : '' %7C '
@@ -488,9 +488,8 @@
 tify
-?
 : ''
@@ -542,16 +542,105 @@
 tween',%0A
+  /** Sets a flex-wrap utility class */%0A  wrap: '' %7C 'wrap' %7C 'wrap-reverse' %7C 'nowrap',%0A
 %7D%0A%0Aconst
@@ -653,24 +653,15 @@
 = (%7B
-%0A 
  align
- = '',%0A 
+,
  dir
@@ -670,58 +670,40 @@
 tion
- = '',%0A  inline = false,%0A  justify = '',%0A 
+, inline, justify, wrap,
  ...rest
 %0A%7D: 
@@ -698,17 +698,17 @@
  ...rest
-%0A
+ 
 %7D: Props
@@ -1042,16 +1042,46 @@
  align,%0A
+      %5B%60flex-$%7Bwrap%7D%60%5D: wrap,%0A
       %5B%60
@@ -1143,16 +1143,114 @@
 st,%0A  %7D)
+%0AFlex.defaultProps = %7B%0A  align: '',%0A  direction: '',%0A  inline: false,%0A  justify: '',%0A  wrap: '',%0A%7D
 %0A%0Aexport

use default props with Flex component