import React from 'react'
import { MySubscriptionProps } from './typings'
import { Wrapper } from './styled'
import { Empty } from 'atoms/Empty'
import { SubscriptionDetailItem } from '../SubscriptionDetailItem'

function defaultRenderSubscriptionDetailList(props: MySubscriptionProps) {
  return <Empty />
}

function defaultRenderSubscriptionCard(props: MySubscriptionProps) {
  return <Empty />
}

function defaultRenderBox(props: MySubscriptionProps) {
  const {
    renderSubscriptionCard,
    renderSubscriptionDetailList,
    ...remainingProps
  } = props

  const SubscriptionCardView = renderSubscriptionCard(remainingProps)
  const detailListView = renderSubscriptionDetailList(remainingProps)

  return (
    <React.Fragment>
      {detailListView}
    </React.Fragment>
  )
}

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

export {
  defaultRenderSubscriptionDetailList,
  defaultRenderSubscriptionCard,
  defaultRenderBox,
  defaultRenderWrapper,
}