import React, {
  Fragment,
  ReactElement
} from 'react'

import {
  Theme
} from '../../common/helpers/Theme'

import {
  ThemeProvider,
  GlobalStyle
} from '../../common/helpers/Styled'

export const CustomComponent: React.FunctionComponent<any> = (props: {
  callback?: (...args: any[]) => ReactElement
  themed?: boolean
}): ReactElement => {
  const {
    themed,
    callback
  } = props

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

  delete newProps.themed
  delete newProps.callback

  if (!callback) {
    return <></>
  }

  return themed ? <ThemeProvider theme={Theme}>
    <Fragment>
      <GlobalStyle />

      {
        callback(newProps)
      }
    </Fragment>
  </ThemeProvider> : callback(newProps)
}