import React, {
  ReactElement
} from 'react'
import styled from 'styled-components'

import {
  MediaQuery
} from "../../common/helpers/MediaQuery"
import {
  DefaultInterface
} from "../../common/helpers/Theme"
import {
  CustomComponent
} from "../../core"

import {
  Div
} from '../../core/Div'

interface BoxBaseInterface extends DefaultInterface {
  break?: boolean
  transparent?: boolean
  flex?: boolean
}

const BoxBase: React.FunctionComponent<BoxBaseInterface> = (props): ReactElement => {
  const {
    children
  } = props

  const newProps = Object.assign({}, {...props})

  delete newProps.children
  delete newProps.themed
  delete newProps.transparent
  delete newProps.flex
  delete newProps.break

  return <Div {...newProps}>
    { children }
  </Div>
}

const Component: React.FunctionComponent<BoxBaseInterface> = styled(BoxBase)`
  margin: 0px auto;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  min-height: 100%;
  height: auto;
  width: 100%;
  align-items: stretch;
  display: flex;

  > div {
    flex: 1;
  }

  ${ MediaQuery.large } {
    width: 944px;
    flex-direction: row;
  }

  ${ MediaQuery.xlarge } {
    padding-bottom: ${ props => props.break ? '65px' : '0px'};
    padding-top: ${ props => props.break ? '65px' : '0px'};
    width: 1200px;
  }

  ${ MediaQuery.xxlarge } {
    width: 1306px;
  }
`

export const Box: React.FunctionComponent<BoxBaseInterface> = (boxProps): ReactElement => <CustomComponent {...boxProps} callback={(props: BoxBaseInterface) => <Component {...props} />} transparent flex className="box" />