function Tab(thisArg) {
  // onClick, class, icons, text, when
  // state(props)
  const tab = new Chain()
  tab.self = instance => tab.set('self', instance).set('props', instance.props)
  tab.self(thisArg)
  tab.extend(['onClick', 'name', 'icon', 'text', 'when', 'link'])
  tab.render = () => {
    const {link, self, props, onClick, text, name, icon, badge} = tab.entries()

    const className = name === props.activeTab ? 'active' : ''
    const badgeClass = `badge ${name}-badge`

    const cb = () => (onClick ? onClick() : props.setActiveTab(name))
    const a = (to, ...child) => <Link to={to}>{child}</Link>
    const li = (...child) => <li className={className} onClick={cb}>{child}</li>
    const i = txt => <i className="material-icons">{txt}</i>
    const t = txt => <span className="text">{txt}</span>
    const badger = txt => <span className={badgeClass}>{txt}</span>
    const badged = badge ? badger(badge) : null
    /* prettier-ignore */
    return li(
      a(link,
        i(icon),
        t(text),
        badged)
    )
  }
  return tab
}

// mixin React?
// class ReactChain extends React.Component {
//   willMount(...args) {
//     return super.componentWillMount(...args)
//   }
//   willUnmount(...args) {
//     return super.componentWillUnmount(...args)
//   }
//   shouldUpdate(...args) {
//     return super.componentShouldUpdate(...args)
//   }
//   didUpdate(...args) {
//     return super.componentDidUpdate(...args)
//   }
// }