import React from 'react'
import { isSafe } from 'exotic'
import { TextProps } from './typings'
import { TextWrapper, StyledText } from './styled'

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

function defaultRenderText(props: TextProps) {
  const { text, content, textColor, backgroundColor, backgroundImage } = props
  const label = isSafe(text) ? text : isSafe(content) ? content : ''
  return (
    <StyledText
      content={label}
      backgroundColor={backgroundColor}
      textColor={textColor}
      backgroundImage={addProtocolsWithURL(backgroundImage)}
    />
  )
}

function defaultRenderWrapper(props: TextProps) {
  const { className, dataQa, renderText, ...remainingProps } = props
  const textView = renderText(remainingProps)
  return (
    <TextWrapper className={className} data-qa={dataQa}>
      {textView}
    </TextWrapper>
  )
}

export { defaultRenderText, defaultRenderBox, defaultRenderWrapper }