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

class AppLayout extends React.Component {

  constructor () {
    super()
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit (event) {
    event.preventDefault()
    console.log(this.props.state.usersActions)
    const { loginRequest } = this.props.state.usersActions
    const data = {
      username: this.username.value,
      password: this.password.value
    }
    console.log(data)
    loginRequest(data)
    //const { fileUploadStart } = this.props.actions
    //const { files } = this.playerListFile
    // if (files.length === 0) {
    //   alertAdd({ type: 'info', text: 'Datei entfernt' })
    //   return
    // }
    // if (files.length > 1) {
    //   alertAdd({ type: 'warning', text: 'Mehrere Dateien gesendet. Nur die erste wird verarbeitet.' })
    // }
  }

  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

    const { token, tokenData } = state.users

    return (
      <div>
      {(tokenData) ? (
        <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>
          <form ref='loginForm' onSubmit={this.handleSubmit}>
            <label>Benutzername</label>
            <input type='text' id='username' ref={(input) => {this.username = input}}/>
            <label>Passwort</label>
            <input type='password' id='password' ref={(input) => {this.password = input}}/>
            <input type='submit' />
          </form>
        </div>
       )}
      </div>
    )
  }
}

export default AppLayout