content: import React from 'react'
  
  const classNames = require('classnames')
  
  export default class HeaderTab extends React.Component {
  
      constructor(props) {
          super(props)
      }
  
      handleClick(event) {
          switch(this.props.tab.key) {
              case 'project':
                  return false
              default:
                  return this.props.openTab(this.props.tab.props.service, this.props.tab.props.port, this.props.tab.props.operation)
          }
      }
  
      closeTab(event) {
          event.preventDefault()
          event.stopPropagation()
          event.nativeEvent.stopImmediatePropagation()
  
          switch(this.props.tab.key) {
              case 'project':
                  return false
              default:
                  return this.props.closeTab(this.props.tab.key)
          }
      }
  
      render() {
          let classes = classNames({
              'tab-item': true,
              'active': this.props.tab.key === this.props.activeTab.key
          })
  
          let title = ''
          switch(this.props.tab.key) {
              case 'project':
                  title = 'New project'
                  break
              default:
  
                  // Todo: Add number of services check as well
                  // title = this.props.tab.props.operation
                  // if (this.props.tab.props.port !== false && this.props.numberOfPorts > 1) {
                  // }
                  title = this.props.tab.props.service + ' - ' +  this.props.tab.props.port + ' - ' + this.props.tab.props.operation
          }
  
          return (
              <div className={classes} key={title} onClick={this.handleClick.bind(this)}>
                  <span className="icon icon-cancel icon-close-tab" onClick={this.closeTab.bind(this)} ></span>
                  {title}
              </div>
          )
      }
  }
  
  
  