// @flow
import cx from 'classnames'
import React from 'react'
import { Box } from 'frack-components'
import { Row, Column, Section } from '@siteone/atoms'
import styles from './HalfToFullGrid.scss'

type Props = {
  reverse?: boolean,
  children: any,
  bgColor?: string,
  className?: string,
}

const halfWidth = {
  s: '100%',
  ns: '50%',
}

const position = {
  s: 'relative',
  ns: 'absolute',
}
const sectionSpaceOnMobile = {
  s: 4,
  ns: 0,
}

const hideSectionPadingOnMobile = {
  s: 0,
  ns: 6,
}

const style = { minHeight: 460 }
const empty = null
const HalfToFullGrid = ({
  reverse, children, bgColor, className, ...props
}: Props) => (
  <Section overflow="hidden" paddingVertical={empty} paddingTop={6} paddingBottom={hideSectionPadingOnMobile} bgColor={bgColor} className={className}>
    <Row flexDirection={reverse ? 'row-reverse' : undefined} position="relative" justifyContent="flex-start" alignItems="center" style={style} {...props}>
      <Column display="flex" marginBottom={sectionSpaceOnMobile} flexDirection="column" justifyContent="center" width={halfWidth}>
        {children[0]}
      </Column>
      <Box className={cx(styles.box, { [styles.reverse]: reverse })} position={position}>
        {children[1]}
      </Box>
    </Row>
  </Section>
)

HalfToFullGrid.defaultProps = {
  bgColor: 'dark-gray',
  reverse: false,
  className: undefined,
}

export default HalfToFullGrid