import React from 'react'
import { SubscriptionOrderInfoProps as OrderInfoProps } from './typings'
import {
  Wrapper,
  Details,
  DetailLink,
  StyledTextPlaceholder
} from './styled'

function defaultRenderActionLink(props: OrderInfoProps) {
  return <StyledTextPlaceholder width={80} height={12} />
}

function defaultRenderDetails(props: OrderInfoProps) {
  return (
    <React.Fragment>
      <StyledTextPlaceholder width={140} height={12} />
      <StyledTextPlaceholder width={220} height={12} />
      <StyledTextPlaceholder width={170} height={12} />
    </React.Fragment>
  )
}

function defaultRenderBox(props: OrderInfoProps) {
  const {
    renderDetails,
    renderActionLink,
    ...remainingProps
  } = props

  const detailsView = renderDetails(remainingProps)
  const linkView = renderActionLink(remainingProps)

  return (
    <React.Fragment>
      <Details>{detailsView}</Details>
      <DetailLink>{linkView}</DetailLink>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: OrderInfoProps) {
  const { className, children } = props
  const passthroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa']
  })
  return <Wrapper {...passthroughProps}>{children}</Wrapper>
}

export {
  defaultRenderWrapper,
  defaultRenderDetails,
  defaultRenderBox,
  defaultRenderActionLink
}