import React from 'react'
import { isSafe, isFunction } from 'exotic'
import { InformationProps } from '@skava/ui/dist/components/molecules/SocialIconList/typings'
import { FooterProps } from './typings'
import {
  StyledMobilePoweredByLabel,
  StyledMobilePoweredByValue,
  StyledPoweredByLabel,
  StyledPoweredByValue,
  StyledCopyRight,
  StyledMultipleLinkList,
  StyledLabel,
  StyledLogoIcon,
  StyledSocialIconList,
} from './styled'

function defaultRenderLogo(props: FooterProps) {
  const { logoType, logoIcon, breed } = props
  const name = isSafe(logoType) ? logoType : 'tgiant'
  const qa = logoIcon && logoIcon.dataQa ? logoIcon.dataQa : ''
  return (
    <StyledLogoIcon type={name} dataQa={qa} breed={breed} id={'footer-logo'} />
  )
}

function defaultRenderMobilePoweredBy(props: FooterProps) {
  const { poweredByData } = props
  const label = poweredByData && poweredByData.label
  const value = poweredByData && poweredByData.value
  return (
    <React.Fragment>
      <StyledMobilePoweredByLabel content={label} />
      <StyledMobilePoweredByValue content={value} />
    </React.Fragment>
  )
}

function defaultRenderPoweredByLabel(props: FooterProps) {
  const { poweredByData } = props
  const label = poweredByData && poweredByData.label
  return <StyledPoweredByLabel content={label} />
}

function defaultRenderPoweredByValue(props: FooterProps) {
  const { poweredByData } = props
  const value = poweredByData && poweredByData.value
  return <StyledPoweredByValue content={value} />
}

function defaultRenderCopyright(props: FooterProps) {
  const { copyrightData } = props
  return <StyledCopyRight {...copyrightData} />
}

function defaultRenderSocialIconLabel(props: FooterProps) {
  const { connectText } = props
  return <StyledLabel content={connectText} />
}

function defaultRenderSocialIcons(props: FooterProps) {
  const { listOfSocialIcons, onSocialIconClick } = props
  const handleSocialIconClick = (event: Event, item: InformationProps) => {
    if (isFunction(onSocialIconClick)) {
      onSocialIconClick({ event, item })
    }
  }
  return (
    <StyledSocialIconList
      iconsList={listOfSocialIcons}
      onClick={handleSocialIconClick}
    />
  )
}

function defaultRenderLinkList(props: FooterProps) {
  const { listOfLinks } = props
  return <StyledMultipleLinkList list={listOfLinks} />
}

export {
  defaultRenderLogo,
  defaultRenderMobilePoweredBy,
  defaultRenderPoweredByLabel,
  defaultRenderPoweredByValue,
  defaultRenderCopyright,
  defaultRenderSocialIcons,
  defaultRenderLinkList,
  defaultRenderSocialIconLabel,
}