import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Header } from 'semantic-ui-react';
import {
  accountAuth, accountProfile, accountLogout
} from '../../actions/account';
import { setEnabled, setStats } from '../../actions/marker';
import Authed from './Authed';
import Unauthed from './Unauthed';
import './App.css';

class App extends Component {
  render() {
    const { token } = this.props;
    const View = token? Authed : Unauthed;
    return (
      <div className='App'>
        <Header as='h3' attached='top' textAlign='center' inverted color='teal'>
          Keyword Marker
        </Header>
        <div className='App-view'>
          <View {...this.props}/>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => Object.assign(
  {}, state.account, state.marker
);

const mapDispatchToProps = dispatch => ({
  accountAuth: data => {
    dispatch(accountAuth(data));
  },
  accountProfile: data => {
    dispatch(accountProfile(data));
  },
  accountLogout: () => {
    dispatch(accountLogout());
  },
  setEnabled: data => {
    dispatch(setEnabled(data));
  },
  setStats: data => {
    dispatch(setStats(data));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(App);