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

function addProtocolsWithURL(url) {
  if (url && url.length > 0) {
    const noProtocolURL = url.replace(/(^\w+:|^)\/\//, '')
    const updatedURL = '//' + noProtocolURL
    return updatedURL
  }
  return url
}

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

export { defaultRenderComponent }