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

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

function ListBase(props: DefaultInterface): ReactElement {
  const {
    children,
    tag
  } = props

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

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

  if (tag === 'ol') {
    return (
      <ol {...newProps}>
        { children }
      </ol>
    )
  }

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

const Component: React.FunctionComponent<DefaultInterface> = styled(ListBase)`
  font-family: ${ props => props.theme && `${props.theme.global.font.primary}, ${props.theme.global.font.secondary}` || 'Verdana, Tahoma, Arial, sans-serif' };
`

export const List: React.FunctionComponent<DefaultInterface> = (listProps): ReactElement => {
  const {
    native = false
  } = listProps

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