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, dataQa, ...remainingProps } = props
  return (
    <DetailedListWrapper
      className={className}
      data-qa={dataQa}
      {...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) {
  /* props included here for supporting the additional classes and styles */
  const { label, value, isColon, dataQa, ...remainingProps } = item
  const view = isSafe(value) ? (
    <DetailedListItemPanel key={label} data-qa={dataQa} {...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(renderListItem)
  } else {
    return renderEmpty(props)
  }
}

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