import React from 'react'
import { string, func } from 'prop-types'
import classNames from 'classnames'

export default function headerRendererFactory(config) {
  const HeaderRenderer = props => {
    const selected = props.sortByProp === props.col

    return (
      <div>
        {props.toggleVisibleProps && (
          <input type="checkbox" onChange={() => props.toggleVisibleProps(props.col)} />
        )}
        <a onClick={() => props.sortBy(props.col)}>{config.byId[props.col].label}</a>
        {config.byId[props.col].label ? (
          <i className={classNames('fa', 'fa-sort', { selected })} aria-hidden="true" />
        ) : null}
      </div>
    )
  }

  HeaderRenderer.propTypes = {
    col: string.isRequired,
    label: string,
    sortBy: func.isRequired,
    sortByProp: string,
    toggleVisibleProps: func
  }

  return HeaderRenderer
}