import _ from "lodash"
import React, { ReactNode } from "react"

/** Single tab of a tabbed component */
export interface TabbedComponentTab {
  id: string
  label: ReactNode
  elem: ReactNode
  onRemove?: () => void 
}

export interface TabbedComponentProps {
  /** Array of { id, label, elem, onRemove (optional) } */
  tabs: TabbedComponentTab[]

  /** Initially selected id of tab */
  initialTabId?: string

  /** Selected id of tab if controlled component */
  tabId?: string

  /** Set to have a plus to add a tab */
  onAddTab?: () => void

  /** Set to be called back when a tab is clicked (tabId) instead of setting internal state */
  onTabClick?: (tabId: string) => void
}

/** Simple bootstrap tabbed component */
export default class TabbedComponent extends React.Component<TabbedComponentProps, { tabId?: string }> {
  constructor(props: any) {
    super(props)
    this.state = { tabId: this.props.initialTabId }
  }

  handleClick = (tabId: any) => {
    if (this.props.onTabClick != null) {
      return this.props.onTabClick(tabId)
    } else {
      return this.setState({ tabId })
    }
  }

  handleRemove = (tab: any, ev: any) => {
    ev.stopPropagation()
    return tab.onRemove()
  }

  renderTab = (tab: any) => {
    let tabId
    if (this.props.tabId != null) {
      ;({ tabId } = this.props)
    } else {
      ;({ tabId } = this.state)
    }
    return (
      <li key={tab.id} className="nav-item">
        <a
          onClick={this.handleClick.bind(null, tab.id)}
          style={{ cursor: "pointer" }}
          className={tabId === tab.id ? "nav-link active" : "nav-link"}
        >
          {tab.label}
          {tab.onRemove ? (
            <button type="button" className="btn btn-sm btn-link" onClick={this.handleRemove.bind(null, tab)}>
              <span className="fa fa-times" />
            </button>
          ) : undefined}
        </a>
      </li>
    )
  }

  render() {
    let tabId
    if (this.props.tabId != null) {
      ;({ tabId } = this.props)
    } else {
      ;({ tabId } = this.state)
    }
    const currentTab = _.findWhere(this.props.tabs, { id: tabId })

    return (
      <div>
        <ul key="tabs" className="nav nav-tabs" style={{ marginBottom: 10 }}>
          {_.map(this.props.tabs, this.renderTab)}
          {this.props.onAddTab ? (
            <li key="_add" className="nav-item">
              <a className="nav-link" onClick={this.props.onAddTab} style={{ cursor: "pointer" }}>
                <i className="fa fa-plus" />
              </a>
            </li>
          ) : undefined}
        </ul>

        <div key="currentTab">{currentTab ? currentTab.elem : undefined}</div>
      </div>
    )
  }
}