import React from 'react'
import {
  SubscriptionItemInfo,
  SubscriptionListProps,
  SubscriptionListState,
} from './typings'
import { HeaderContent, Item, ListWrapper, Wrapper } from './styled'

function defaultRenderHeader(props: SubscriptionListProps, state: SubscriptionListState) {
  return <HeaderContent width={150} height={18} />
}

function defaultRenderItem(props: SubscriptionItemInfo, state: SubscriptionListState) {
  return <Item />
}

function defaultRenderList(props: SubscriptionListProps, state: SubscriptionListState) {
  const { list, renderItem, ...remainingProps } = props
  const listView = list.map((item, index) => renderItem({ ...item, index }))
  return <ListWrapper>{listView}</ListWrapper>
}

function defaultRenderBox(props: SubscriptionListProps, state: SubscriptionListState) {
  const { renderHeader, renderList, ...remainingProps } = props
  return (
    <React.Fragment>
      {renderHeader(remainingProps)}
      {renderList(remainingProps)}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: SubscriptionListProps, state: SubscriptionListState) {
  const { className, ...remainingProps } = props
  const children = defaultRenderBox(remainingProps, state)
  return <Wrapper className={className}>{children}</Wrapper>
}

export {
  defaultRenderHeader,
  defaultRenderItem,
  defaultRenderList,
  defaultRenderWrapper,
}