import React from 'react'
import { Empty } from 'atoms/Empty'
import { DetailedListProps, LabelValue } from './typings'
import Heading from 'atoms/Text/Heading'
import {
  DetailedListWrapper,
  DetailedListItemPanel,
  DetailedListLabel,
  DetailedListValue,
} from './styled'

/**
 * rendering the Wrapper
 */
function defaultRenderWrapper(props: DetailedListProps) {
  const { className, children, ...remainingProps } = props
  return <DetailedListWrapper className={className} {...remainingProps}>{children}</DetailedListWrapper>
}

/**
 * rendering the Heading
 */
function defaultRenderListHeading(props: DetailedListProps) {
  return <Heading breedType="h3" content={props.title} />
}

/**
 * rendering one single item
 */
function defaultRenderListItem(
  item: LabelValue,
  index: number
) {
  /* props included here for supporting the additional classes and styles */
  const { label, value, isColon, ...remainingProps } = item
  return (
    /**
     * @todo isColumnView is currently not accepting the dynamic values
     * this logic will be changed by using React.Context type but later
     *
     * @note ^ was just a typo
     *  isColumnView={true}
     */
    <DetailedListItemPanel key={index}  {...remainingProps}>
      <DetailedListLabel isColon={isColon}>{label}</DetailedListLabel>
      <DetailedListValue>{value}</DetailedListValue>
    </DetailedListItemPanel>
  )
}

/**
 * renders empty
 */
function defaultRenderEmpty(props: DetailedListProps) {
  return <Empty />
}

/**
 * rendering the list panel
 */
function defaultRenderList(props: DetailedListProps) {
  const { list, renderEmpty, renderListItem } = props
  if (list.length > 0) {
    return list.map((item, index) =>
      renderListItem(item)
    )
  } else {
    return renderEmpty(props)
  }
}

export {
  defaultRenderList,
  defaultRenderWrapper,
  defaultRenderListHeading,
  defaultRenderListItem,
  defaultRenderEmpty,
}