import React from 'react'
import { CategoryBaseComponentProps, CategoryGridProps } from './typings'
import {
  StyledLink,
  StyledTitle,
  StyledMediaCarousel,
  StyledFigure,
  StyledWrapper,
} from './styled'

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

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

function defaultRenderWrapper(props: CategoryGridProps) {
  const { className, title, ...remainingProps } = props
  return (
    <StyledWrapper className={className}>
      <StyledTitle>{title}</StyledTitle>
      <StyledMediaCarousel
        renderItem={defaultRenderComponent}
        {...remainingProps}
      />
    </StyledWrapper>
  )
}

export { defaultRenderWrapper }