import React, {Component} from 'react'
import {browserHistory} from 'react-router'
import styled from 'styled-components'
import make_tabs_with_routes from './make_tabs_with_routes'
import auto_bind from 'common/auto_bind'
import {color, link} from 'common/styles'

export default class Tabbar extends Component {
  constructor(props) {
    super(props)
    auto_bind(this)
  }

  defaultProps = {
    children: [],
  }

  static make_tabs_with_routes = make_tabs_with_routes

  render_tab({label, active, onClick}, index) {
    return (
      <Tab key={index} onClick={onClick} active={active}>
        {label}
      </Tab>
    )
  }

  render() {
    const {children: tabs, header, className} = this.props
    return (
      <Container className={className}>
        {header ? (
          <Header>
            {header}
          </Header>
        ) : null}
        <Tabs>
          {tabs.map(this.render_tab)}
        </Tabs>
      </Container>
    )
  }
}

const Container = styled.div`
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  height: 50px;
  background-color: ${color('primary', 'light')};
`

const Header = styled.div`
  flex-shrink: 0;
  display: flex;
  align-items: center;
`

const Tabs = styled.div`
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
`

const Tab = styled.div`
  display: flex;
  color: white;
  align-items: center;
  border: solid 3px transparent;
  text-transform: uppercase;
  margin: 0 30px;
  ${link}
  &:hover {
    opacity: 1;
  }
  ${({active}) => active ? `border-bottom-color: ${color('action')}; ` : `opacity: 0.7;`}
`