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

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

interface LinkBaseInterface extends DefaultInterface {
  href: string
  id?: string
  name?: string
  target?: string
  onClick?: any
  styles?: any
}

function LinkBase(props: LinkBaseInterface): ReactElement {
  const {
    children
  } = props

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

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

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

const Component: React.FunctionComponent<LinkBaseInterface> = styled(LinkBase)`
  ${ props => ComponentResponsiveStyled(props, 'link') }

  text-decoration: none;

  * {
    pointer-events: none;
  }
`

export const Link: React.FunctionComponent<LinkBaseInterface> = (labelProps): ReactElement => {
  const {
    native = false
  } = labelProps

  return !native
    ? <CustomComponent {...labelProps} callback={(props: LinkBaseInterface) => <Component {...props} /> } />
    : <LinkBase {...labelProps} />
}