import React from 'react'
import {
  TextPlaceholder,
  RectanglePlaceholder,
  ListPlaceholder,
} from 'atoms/Placeholder'
import { FooterProps } from './typings'
import {
  Divider,
  StyledSquarePlaceholder,
  FooterCopyright,
  FooterSocialIcons,
  FooterSocialIconWrapper,
  ListOfLinks,
  ListWrapper,
  FooterLogoWrapper,
  FooterLogo,
  FooterMobilePoweredBy,
  FooterPoweredByLabel,
  FooterPoweredByValue,
  FooterBottomWrapper,
  FooterTopWrapper,
  FooterContainer,
  FooterWrapper,
} from './styled'

function defaultRenderLogo(props: FooterProps) {
  return <TextPlaceholder width={200} height={44} />
}

function defaultRenderMobilePoweredBy(props: FooterProps) {
  return <TextPlaceholder width={200} height={14} />
}

function defaultRenderPoweredByLabel(props: FooterProps) {
  return <TextPlaceholder width={75} height={12} />
}

function defaultRenderPoweredByValue(props: FooterProps) {
  return <TextPlaceholder width={125} height={14} />
}

function defaultRenderList(item: Object, index: number) {
  const heading = <TextPlaceholder height={16} className="header-text" />
  const children = <ListPlaceholder {...item} />
  return (
    <ListWrapper>
      {heading}
      {children}
    </ListWrapper>
  )
}

function defaultRenderLinkList(props: FooterProps) {
  const { listOfLinks } = props
  const children = listOfLinks.map((item, index) => defaultRenderList(item, index))
  return children
}

function defaultRenderCopyright(props: FooterProps) {
  return (
    <React.Fragment>
      <TextPlaceholder width={150} height={16} />
      <Divider>
        <RectanglePlaceholder width={2} height={16} />
      </Divider>
      <TextPlaceholder width={150} height={16} />
    </React.Fragment>
  )
}

function defaultRenderSocialIconLabel(props: FooterProps) {
  return <TextPlaceholder width={100} height={16} />
}

function defaultRenderSocialIcons(props: FooterProps) {
  const { socialIconData } = props
  const children = socialIconData.map((item, index) => (
    <StyledSquarePlaceholder width={40} height={40} />
  ))
  return children
}

function defaultRenderContainer(props: FooterProps) {
  const {
    renderLogo,
    renderMobilePoweredBy,
    renderPoweredByLabel,
    renderPoweredByValue,
    renderLinkList,
    renderCopyright,
    renderSocialIconLabel,
    renderSocialIcons,
    ...remainingProps,
  } = props

  return (
    <FooterContainer>
      <FooterTopWrapper>
        <FooterLogoWrapper>
          <FooterLogo>{renderLogo(remainingProps)}</FooterLogo>
          <FooterPoweredByLabel>{renderPoweredByLabel(remainingProps)}</FooterPoweredByLabel>
          <FooterPoweredByValue>{renderPoweredByValue(remainingProps)}</FooterPoweredByValue>
        </FooterLogoWrapper>
        <ListOfLinks>{renderLinkList(remainingProps)}</ListOfLinks>
      </FooterTopWrapper>
      <FooterBottomWrapper>
        <FooterCopyright>{renderCopyright(remainingProps)}</FooterCopyright>
        <FooterSocialIconWrapper>
          {renderSocialIconLabel(remainingProps)}
          <FooterSocialIcons>{renderSocialIcons(remainingProps)}</FooterSocialIcons>
        </FooterSocialIconWrapper>
        <FooterMobilePoweredBy>{renderMobilePoweredBy(remainingProps)}</FooterMobilePoweredBy>
      </FooterBottomWrapper>
    </FooterContainer>
  )
}

function defaultRenderWrapper(props: FooterProps) {
  const { className, children } = props
  return <FooterWrapper className={className}>{children}</FooterWrapper>
}

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