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

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

function FieldsetBase(props: DefaultInterface): ReactElement {
  const {
    children
  } = props

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

  delete newProps.children
  delete newProps.themed
  delete newProps.native

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

const Component = styled(FieldsetBase)`
  border: 0px none;
  margin-bottom: 30px;

  &:last-child {
    margin-bottom: 0px;
  }

  ${MediaQuery.xlarge} {
    margin-bottom: 50px;
  }
`

export const Fieldset: React.FunctionComponent<DefaultInterface> = (fieldsetProps): ReactElement => {
  const {
    native
  } = fieldsetProps

  return !native
    ? <CustomComponent {...fieldsetProps} callback={(props: DefaultInterface) => <Component {...props} /> } />
    : <FieldsetBase {...fieldsetProps} />
}