import React from 'react'
import { EMPTY_ARRAY } from 'exotic'
import { BreadCrumbProps } from './typings'
import {
  defaultRenderWrapper,
  renderList as defaultRenderList,
  defaultRenderSeparator,
} from './renderProps'

/**
 * @todo
 * use fixture to share the default data to list property
 *
 * use all renderProps functions to render the UI
 */
class BreadCrumb extends React.PureComponent<BreadCrumbProps> {
  static defaultProps = {
    className: '',
    list: EMPTY_ARRAY,
    renderWrapper: defaultRenderWrapper,
    renderList: defaultRenderList,
    renderSeparator: defaultRenderSeparator,
  }

  render() {
    const { renderList, renderWrapper, ...remainingProps } = this.props
    const children = renderList(remainingProps)
    const view = renderWrapper({ ...remainingProps, children })
    return view
  }
}

export { BreadCrumb }
export default BreadCrumb