import React from 'react'
import ArrowIcon from 'atoms/Icons/ArrowIcon'
import { Empty } from 'atoms/Empty'
import { BreadCrumbWrapper, BreadCrumbBox, LinkItem, Separator } from './styled'
import { BreadCrumbProps, ListProps } from './typings'

/* Render BreadCrumb navigation dom */
function renderLinkItem(props: ListProps) {
  return <LinkItem to={props.url} text={props.text} />
}

/* Render BreadCrumb separator section */
function defaultRenderSeparator() {
  return (
    <Separator>
      <ArrowIcon right />
    </Separator>
  )
}

/* Render BreadCrumb container inner dom, child of wrapper section */
function renderList(props: BreadCrumbProps) {
  const { list, renderSeparator } = props
  const listLength = list.length - 1
  const boxView = list.map((item: ListProps, index: number) => {
    return (
      <React.Fragment key={index}>
        {renderLinkItem({ ...item })}
        {index === listLength ? <Empty /> : renderSeparator()}
      </React.Fragment>
    )
  })

  return <BreadCrumbBox>{boxView}</BreadCrumbBox>
}

/* Render BreadCrumb wrapper */
function defaultRenderWrapper(props: BreadCrumbProps) {
  const { className, children } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa'],
  })
  return <BreadCrumbWrapper {...passThroughProps}>{children}</BreadCrumbWrapper>
}

export { defaultRenderWrapper, renderList, defaultRenderSeparator }