import React, {Component} from 'react'
import {browserHistory} from 'react-router'
import {color} from '../common/constants'

class Tabbar extends Component {
  render() {
    return (
      <div style={{flexShrink: 0, display: "flex", flexDirection: "row", alignItems: 'center', borderBottomStyle: 'solid', borderBottomColor: color('black', 'pale'), borderBottomWidth: 1, paddingLeft: 50}}>
        {this.props.tabs.map((tab, index) => <Tab onClick={tab.onClick} path={tab.path} label={tab.label} key={index} active={tab.is_active(this.props.location.pathname)} />)}
      </div>
    )
  }
}

class Tab extends Component {
  render() {
    return (
      <div
        className="nav-link"
        onClick={this.props.onClick || (() => browserHistory.push(this.props.path))}
        style={{
          padding: 15,
          color: color('black'),
          position: 'relative',
          ...(this.props.active ? {color: color('primary', 'light'), textDecoration: 'none', opacity: 1} : {}),
        }}
        >
        {this.props.label}
        {this.props.active ? (
          <div style={{height: 3, position: "absolute", backgroundColor: color('primary', 'light'), bottom: 0, left: 5, right: 5}}/>
        ) : null}
      </div>
    )
  }
}

Tabbar.defaultProps = {
  tabs: [],
  location: {},
}

export default Tabbar