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

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

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

/* Render Breadcrumb container inner dom's */
const renderingBreadCrumb = props => {
  const breadCrumbList = []
  const { list } = props

  const breadCrumbItems = (item, index) => {
    const { text, url } = item
    const isLast = index === list.length - 1

    const view = renderLinkItem(item)
    breadCrumbList.push(view)

    if (isLast === false) {
      breadCrumbList.push(renderSeparator())
    } else {
      breadCrumbList.push('')
    }
  }

  list.forEach(breadCrumbItems)
  return breadCrumbList
}

/* Render Breadcrumb container, child of wrapper section */
function renderContainer(props: BreadCrumbProps) {
  return <BreadCrumbContainer>{renderingBreadCrumb(props)}</BreadCrumbContainer>
}

/* Render Breadcrumb wrapper */
function renderWrapper(props: BreadCrumbProps) {
  return <BreadCrumbWrapper>{props.children}</BreadCrumbWrapper>
}

export { renderWrapper, renderContainer, renderSeparator }