import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { loadParams } from '../actions/appActions';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { ConfigPage, ControlsPage, FilesPage, ScoreboardPage } from '../pages';
import { Layout } from 'antd';
import { AppHeader } from '../components';
import 'antd/dist/antd.css';

const { Content } = Layout;

class AppRouter extends Component {

  componentWillMount() {
    this.props.loadParams();
  };

  render() {

    return (
      <Router>
        <Layout style={{height:"100%"}}>
          <AppHeader />
          <Content style={{ padding: '0 50px', marginTop: 64 }}>
            <div style={{ background: '#fff', padding: 24, minHeight: '100%' }}>
              <Route exact path='/' component={ScoreboardPage} />
              <Route exact path='/controls' component={ControlsPage} />
              <Route exact path='/config' component={ConfigPage} />
              <Route exact path='/files' component={FilesPage} />
            </div>
          </Content>
        </Layout>
      </Router>
    )
  }
};

AppRouter.propTypes = {
  loadParams: PropTypes.func.isRequired,
  params: PropTypes.array
};

const mapStateToProps = state => ({
  params: state.appData.players,
  paramsLoadError: state.appData.paramsLoadError
});

export default connect(mapStateToProps, { loadParams })(AppRouter);