import React, {Component} from 'react'
import {browserHistory} from 'react-router'
import styled, {css} 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;
  flex-direction: column;
  align-items: stretch;
  width: 200px;
  background-color: ${color('white')};
  box-shadow: 0 1px 2px 1px ${color('black', 'normal', 0.25)};
  z-index: 1;
  overflow: scroll;
`

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

const Tabs = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
`

const Tab = styled.div`
  display: flex;
  color: ${color('black')};
  padding: 8px 12px;
  flex-shrink: 0;
  ${({active}) => active ? css`
    background-color: ${color('black', 'pale')};
  ` : css`
    ${link}
    &:hover {
      opacity: 1;
      background-color: ${color('black', 'translucent')};
    }
  `}
`