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

import {
  DefaultInterface,
  ComponentResponsiveStyled
} from "./../../common/helpers/Theme"
import {
  CustomComponent
} from "../"

interface DivBaseInterface extends DefaultInterface {
  styles?: any
}

function DivBase(props: DivBaseInterface): ReactElement {
  const {
    children
  } = props

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

  delete newProps.children
  delete newProps.native
  delete newProps.flex
  delete newProps.background
  delete newProps.stretch

  return (
    <div {...newProps}>
      { children }
    </div>
  )
}

const Component: React.FunctionComponent<DivBaseInterface> = styled(DivBase)`
  ${ props => ComponentResponsiveStyled(props, 'div') }

  ${ props => props.stretch && `
    align-self: stretch;
    flex: 1;
  `};
  
  display: ${ props => {
    const display = {
      type: 'block'
    }

    if (props.flex) {
      Object.assign(display, {
        type: 'flex'
      })
    }

    if (props.inline) {
      Object.assign(display, {
        type: 'inline'
      })
    }

    return display. type
  }};

  > * {
    flex: ${ props => {
      const flex = {
        setting: 'unset'
      }

      if (props.flex) {
        Object.assign(flex, {
          setting: 1
        })
      }

      return flex.setting
    }}
  }
`

export const Div: React.FunctionComponent<DivBaseInterface> = (divProps): ReactElement => {
  const {
    native
  } = divProps

  return !native
    ? <CustomComponent {...divProps} callback={(props: DivBaseInterface) => <Component {...props} /> } />
    : <DivBase {...divProps} />
}