import React from 'react'
import { Empty } from 'atoms/Empty'
import TextPlaceholder from 'atoms/Placeholder/TextPlaceholder'
import { DetailedListProps } from './typings'
import { HeadingTextPlaceholder, StyledTextPlaceholder, DetailedListItemWrapper, DetailedListWrapper } from './styled'

function defaultRenderDetailedListHeading(props: DetailedListProps) {
  return <HeadingTextPlaceholder width="300px"/>
}

function defaultRenderDetailedListItem(props: DetailedListProps) {
  return (
    <React.Fragment><TextPlaceholder className={'dl-datum'} width={200}/><StyledTextPlaceholder width={200}/></React.Fragment>
  )
}

function defaultRenderDetailedList(props: DetailedListProps) {
  const { list, renderDetailedListItem, isColumnView, ...remainingProps } = props

  if ( list.length > 0 ) {
    return list.map(( item, index ) =>
      <DetailedListItemWrapper key={index} isColumnView={isColumnView}>{renderDetailedListItem({item, ...remainingProps})}</DetailedListItemWrapper>
    )
  } else {
    return <Empty />
  }

}

function defaultRenderWrapper(props: DetailedListProps) {
  const { className, children } = props

  return <DetailedListWrapper className={className} >{children}</DetailedListWrapper>
}

export { defaultRenderDetailedListHeading, defaultRenderDetailedListItem, defaultRenderDetailedList, defaultRenderWrapper }