import React from 'react'
import {
  SubscriptionOrderInfoProps as OrderInfoProps,
  OrderInfoDetailProps
} from './typings'
import {
  StyledLink,
  DetailsRow,
  DetailsLabel,
  DetailsValue
} from './styled'

function defaultRenderActionLink(props: OrderInfoProps) {
  const { item } = props
  const { orderInfoLink } = item
  const {
    value,
    src
  } = orderInfoLink
  return <StyledLink href={src} text={value} />
}

const renderDetailsInfo = (item: OrderInfoDetailProps) => {
  const {
    label,
    value,
  } = item

  const passThroughProps = Object.freeze({
    'data-qa': item['data-qa'],
  })

  return (
    <DetailsRow {...passThroughProps}>
      <DetailsLabel>{label}: </DetailsLabel>
      <DetailsValue>{value}</DetailsValue>
    </DetailsRow>
  )
}

function defaultRenderDetails(props: OrderInfoProps) {
  const { item } = props
  const { orderInfoDetails } = item
  const view = orderInfoDetails.map(renderDetailsInfo)
  return view
}

export {
  defaultRenderDetails,
  defaultRenderActionLink
}