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

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

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

function defaultRenderLogo(props: HeroBannerProps) {
  const { logoType } = props
  switch (logoType) {
    case 't-giant-pro':
      return <LogoIcon type="t-giant" breed="pro" />
    case 't-giant-pro-red':
      return <RedLogo type="t-giant" breed="pro" />
    case 'skava-town':
      return <LogoIcon type="skava-town" />
    case 'skava':
      return <LogoIcon type="skava" />
    default:
      return <LogoIcon type="t-giant" />
  }
}

function defaultRenderBox(props: HeroBannerProps) {
  const {
    renderLogo,
    renderTitle,
    renderButton,
    backgroundColor,
    backgroundImage,
    ...remainingProps
  } = props
  return (
    <BannerWrapper
      backgroundColor={backgroundColor}
      backgroundImage={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,
}