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

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

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

function defaultRenderBox(props: SubscriptionOrderInformationProps) {
  const {
    renderOrderInformation,
    renderDeliveryInformation,
    ...remainingProps
  } = props

  const detailsView = renderOrderInformation(remainingProps)
  const dateView = renderDeliveryInformation(remainingProps)

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

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

export {
  defaultRenderOrderInformation,
  defaultRenderDeliveryInformation,
  defaultRenderBox,
  defaultRenderWrapper,
}