import React from 'react'
import { Tabs, Tab } from 'react-bootstrap'

class AppLayout extends React.Component {
  render () {
    const { state } = this.props
    const { activeTab } = this.props.state.layout
    const { changeTab } = this.props.state.layoutActions
    const { PlayerList, MatchList, StartPage, UserList } = this.props.components

    return (
      <div>
        <Tabs activeKey={activeTab} onSelect={changeTab} id='layout-tabs'>
          <Tab eventKey={0} title='Setup'>
            <StartPage {...state} />
          </Tab>
          <Tab eventKey={1} title='Users'>
            <UserList state={state.users} actions={state.usersActions} />
            </Tab>
          <Tab eventKey={2} title='PlayerList' >
            <PlayerList state={state.playerList} actions={state.playerListActions} />
          </Tab>
          <Tab eventKey={3} title='Calendar' >
            <MatchList state={state.calendar} actions={state.calendarActions} />
          </Tab>
          <Tab eventKey={4} title='Spielplan' />
          <Tab eventKey={5} title='Zahlliste' />
        </Tabs>
      </div>
    )
  }
}

export default AppLayout