import React from 'react'
import { ImageProps, ImageStates } from './typings'
import { omit } from '@skava/modules/___dist/utils/omit'
import { ImageWrapper, ImageElement, ImageBackground } from './styled'

/**
 * Rendering a Image tag with inside the div tag
 */
function renderWrap(props: ImageProps) {
  const { width, height, nowrap, className, children, alt } = props

  if (nowrap === true) {
    return <React.Fragment>{children}</React.Fragment>
  } else {
    return (
      <ImageWrapper
        className={className}
        width={width}
        height={height}
        alt={alt}
      >
        {children}
      </ImageWrapper>
    )
  }
}

/**
 * rendering the image tag
 */
function renderImageAsSemanticTag(props: ImageProps) {
  // if there is no wrapper, we apply the classname to the element
  return (
    <ImageElement
      className={props.nowrap && props.className}
      src={props.src}
      alt={props.alt}
      doAutoAlign={props.doAutoAlign}
    />
  )
}

/**
 * Rendering as a Background Image
 */
function renderImageAsBackground(props: ImageProps) {
  // may need to pass in more, but those need to be defined
  const { src, ...remainingProps } = props
  return <ImageBackground src={src} {...remainingProps} />
}

/**
 * Main rendering method of the Image Component
 */
function renderImage(props: ImageProps) {
  const remainingProps = omit(props, 'isBackground')
  if (props.isBackground === true) {
    return renderImageAsBackground(remainingProps)
  } else {
    return renderImageAsSemanticTag(remainingProps)
  }
}

export {
  renderWrap,
  renderImageAsSemanticTag,
  renderImageAsBackground,
  renderImage,
}