import React from 'react'
import toClassName from 'classnames'
import { tabClasses } from './fixture'
import { TabItemProps } from './typings'

class TabItem extends React.PureComponent<TabItemProps> {
  static defaultProps = {
    title: '',
    qa: '',
  }

  render() {
    // index
    const { title, onClick, isSelected, qa, ariaControl } = this.props

    const dynamic = {
      selected: isSelected,
      unselected: isSelected === false,
    }
    const className = toClassName(
      this.props.className,
      tabClasses.tabItem,
      dynamic
    )

    const attributes = {
      key: title,
      className,
      onClick,
      role: 'tab',
      'aria-controls': ariaControl,
      'aria-selected': isSelected,
      'data-qa': 'qa-' + qa,
    }

    return React.createElement('a', attributes, title.toLowerCase())
  }
}

export { TabItem }
export default TabItem