import React from 'react'
import { fromIshToString } from 'exotic'
import { toUrlWithProtocol } from '@skava/utils'
import Empty from '@skava/ui/dist/components/atoms/Empty'
import { HeroBannerProps } from './typings'
import {
  StyledImage,
  StyledLink,
  StyledTitle,
  ButtonWrapper,
  TitleWrapper,
  LogoWrapper,
  BannerWrapper,
  Wrapper,
} from './styled'

function defaultRenderButton(props: HeroBannerProps) {
  const { buttonLabel, url } = props
  const validButtonLabel = fromIshToString(buttonLabel)
  const buttonUrl = fromIshToString(url)
  const validButtonUrl = toUrlWithProtocol(buttonUrl)
  if (validButtonLabel) {
    return <StyledLink to={validButtonUrl} text={validButtonLabel} />
  } else {
    return <Empty />
  }
}

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

function defaultRenderLogo(props: HeroBannerProps) {
  const { logo } = props
  const logoUrl = fromIshToString(logo)
  const validLogoUrl = toUrlWithProtocol(logoUrl)
  if (validLogoUrl) {
    return <StyledImage src={validLogoUrl} alt={'Logo'} />
  } else {
    return <Empty />
  }
}

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