import React from 'react'
import { AddressProps } from './typings'
import {
  Wrapper,
  Container,
  StyledTitlePlaceholder,
  StyledAddressPlaceholder,
} from './styled'

function defaultRenderTitle(props: AddressProps) {
  return <StyledTitlePlaceholder width={200} height={18} />
}

function defaultRenderAddress(props: AddressProps) {
  return (
    <React.Fragment>
      <StyledAddressPlaceholder width={180} height={14} />
      <StyledAddressPlaceholder width={160} height={14} />
      <StyledAddressPlaceholder width={190} height={14} />
    </React.Fragment>
  )
}

function defaultRenderContainer(props: AddressProps) {
  const { renderTitle, renderAddress, ...remainingProps } = props
  const titleView = renderTitle(remainingProps)
  const addressView = renderAddress(remainingProps)
  return (
    <Container>
      {titleView}
      {addressView}
    </Container>
  )
}

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

export {
  defaultRenderWrapper,
  defaultRenderContainer,
  defaultRenderAddress,
  defaultRenderTitle,
}