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

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

interface ImageBaseInterface extends DefaultInterface {
  alt?: string
  longDesc?: string
  src?: string
}

function ImageBase(props: ImageBaseInterface): ReactElement {
  const newProps = Object.assign({}, {...props})

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

  return (
    <img {...newProps} />
  )
}

const Component: React.FunctionComponent<ImageBaseInterface> = styled(ImageBase)``

export const Image: React.FunctionComponent<ImageBaseInterface> = (imageProps): ReactElement => {
  const {
    native
  } = imageProps

  return !native
    ? <CustomComponent {...imageProps} callback={(props: ImageBaseInterface) => <Component {...props} /> } />
    : <ImageBase {...imageProps} />
}