import React from 'react'
import { isSafe } from 'exotic'
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) {
  const view = isSafe(props.title)
    ? <Heading breedType="h3" content={props.title} />
    : <Empty />
  return view
}

/**
 * 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
  const view = isSafe(value)
    ? (
      <DetailedListItemPanel key={index}  {...remainingProps}>
        <DetailedListLabel isColon={isColon}>{label}</DetailedListLabel>
        <DetailedListValue>{value}</DetailedListValue>
      </DetailedListItemPanel>
    )
    : <Empty />

  /**
   * @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}
  */
  return view
}

/**
 * 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,
}