import React from 'react';
import { Switch, Route } from 'react-router-dom';
import NotFound from 'containers/Pages/Standalone/NotFoundDedicated';
import Auth from './Auth';
import Application from './Application';
import LoginDedicated from '../Pages/Standalone/LoginDedicated';
import ThemeWrapper from './ThemeWrapper';
import {  Snackbar, Button, Icon } from '@material-ui/core';
import { connect } from 'react-redux';
window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;

function App(props) {
  
  const handleMessageClose = () => {
    props.dispatch(closeMessage())
  }
  
  const {
    openMessage = false,
    message = '',
    type = 'error'
  } = props
  
  return (
    <ThemeWrapper>
      <Snackbar
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          open={openMessage}
          autoHideDuration={6000}
          onClose={handleMessageClose}
          message={
            <div className="center-aligned-child">
              <Icon style={{
                fontSize: 20,
                marginRight: 15
              }} > 
                {type === 'success' ? 'check_circle' : 'report_problem'}
              </Icon>
              {message}
            </div>
          }
          action={[
            <Button key="undo" color="secondary" size="small" onClick={handleMessageClose}>
              <Icon> 
                {'close'}
              </Icon>
            </Button>
          ]}
        />
      <Switch>
        <Route path="/" exact component={LoginDedicated} />
        <Route path="/app" component={Application} />
        <Route component={Auth} />
        <Route component={NotFound} />
      </Switch>
    </ThemeWrapper>
  );
}

const reducer = 'message';
const mapStateToProps = state => ({
  force: state, // force state from reducer
  message: state.getIn([reducer, 'message']),
  type: state.getIn([reducer, 'type']),
  openMessage: state.getIn([reducer, 'openMessage'])
});

const mapDispatchToProps = dispatch => ({
  dispatch: dispatch
});
const AppMapped = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

export default AppMapped;