import React from 'react'
import { HeroBannerProps } from './typings'
import {
  StyledImage,
  RedLogo,
  StyledLink,
  StyledTitle,
  ButtonWrapper,
  TitleWrapper,
  LogoWrapper,
  BannerWrapper,
  Wrapper,
} from './styled'

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

function defaultRenderButton(props: HeroBannerProps) {
  const { buttonLabel, url } = props
  const buttonUrl = addProtocolsWithURL(url)
  return <StyledLink to={buttonUrl} text={buttonLabel} />
}

function defaultRenderTitle(props: HeroBannerProps) {
  const { text } = props
  return <StyledTitle content={text} />
}

function defaultRenderLogo(props: HeroBannerProps) {
  const { logo } = props
  return (
    <StyledImage
      src={
        logo
          ? addProtocolsWithURL(logo)
          : 'https://raderain-cdn.sirv.com/devs/home/home-logo-adspot.png'
      }
      alt={'Logo'}
    />
  )
}

function defaultRenderBox(props: HeroBannerProps) {
  const {
    renderLogo,
    renderTitle,
    renderButton,
    backgroundColor,
    backgroundImage,
    ...remainingProps
  } = props
  return (
    <BannerWrapper
      backgroundColor={backgroundColor}
      backgroundImage={addProtocolsWithURL(backgroundImage)}
    >
      <LogoWrapper>{renderLogo(remainingProps)}</LogoWrapper>
      <TitleWrapper>{renderTitle(remainingProps)}</TitleWrapper>
      <ButtonWrapper>{renderButton(remainingProps)}</ButtonWrapper>
    </BannerWrapper>
  )
}

function defaultRenderWrapper(props: HeroBannerProps) {
  const { className, dataQa, children } = props
  return (
    <Wrapper className={className} data-qa={dataQa}>
      {children}
    </Wrapper>
  )
}

export {
  defaultRenderButton,
  defaultRenderTitle,
  defaultRenderLogo,
  defaultRenderBox,
  defaultRenderWrapper,
}