import React from 'react'
import { GridTemplateProps } from 'presets/Studio/GridTemplate'
import ImageWithLink from 'molecules/ImageWithLink'

function addProtocolsWithURL(url) {
  if (url && url.length > 0) {
    const protocol = url.substr(0, 8)
    if (
      protocol.indexOf('http://') !== -1 ||
      protocol.indexOf('https://') !== -1
    ) {
      return url
    } else {
      const noProtocol = url.substr(0, 2)
      const withWWW = url.substr(0, 3)
      if (noProtocol === '//') {
        return url
      } else if (withWWW === 'www') {
        return 'http://' + url
      }
    }
  }
  return url
}

function defaultRenderComponent(props: GridTemplateProps) {
  const { url, src, alternateText, backgroundColor } = props
  const imageUrl = addProtocolsWithURL(url)
  const imageSrc =
    src !== '' ? src : 'https://reactdemo.skavaone.com/images/null_image.png'
  return <ImageWithLink url={imageUrl} src={imageSrc} alt={alternateText} />
}

export { defaultRenderComponent }