content: import React from 'react'
  import {
      AppBar,
      Toolbar,
      Typography,
      IconButton,
      Grid,
      Avatar
  } from '@material-ui/core'
  import {Timeline, Code, Brightness6Outlined} from '@material-ui/icons'
  import {strings} from "../res/Strings";
  import ShiftListView from "./ShiftListView";
  import Today from './Today'
  import Statistics from './Statistics'
  import {MuiThemeProvider, createMuiTheme} from "@material-ui/core/styles/";
  import {store} from "../store/DataStore";
  import TopMenu from './TopMenu'
  import {LinearProgress} from '@material-ui/core'
  import {colors} from "../res/Colors";
  import withWidth from '@material-ui/core/withWidth'
  
  const darkTheme = createMuiTheme({
      palette: {
          type: 'dark',
          primary: {
              main: colors.dark
          },
          secondary: {
              main: colors.orange,
          },
      }
  });
  
  const lightTheme = createMuiTheme({
      palette: {
          type: 'light',
          primary: {
              main: colors.white
          },
          secondary: {
              main: colors.orange,
          },
      }
  });
  
  const styles = {
      grow: {
          flexGrow: 1
      },
      avatar: {
          height: 35,
          width: 35,
      },
      logo:{
          fontSize: 40,
      },
      dashboardLight:{
          marginTop: 10,
          marginBottom: 10,
          backgroundColor: lightTheme.palette.background.paper
      },
      dashboardDark:{
          marginTop: 10,
          marginBottom: 10,
          backgroundColor: darkTheme.palette.background.paper
      },
      lightRoot:{
          backgroundColor: lightTheme.palette.background.paper,
          overflowX:'hidden'
      },
      darkRoot:{
          backgroundColor: darkTheme.palette.background.paper,
          overflowX:'hidden',
          height:'100vh'
      },
      emptyView:{
          fontSize: 100,
          marginTop: 100
      }
  
  }
  
  class Dashboard extends React.Component {
  
      constructor(props){
          super(props)
          this.TopMenu = React.createRef()
          this.state = {isReady: false, isEmpty: false, darkTheme:false}
          store.subscribe(()=>{
              if (store.getState().shifts.length > 0) {
                  this.setState({isReady: true, isEmpty:false})
              } else {
                  this.setState({isReady:true, isEmpty: true})
              }
          })
      }
  
      _getDashboardView = ()=>{
          return (<Grid container spacing={24} style={this.state.darkTheme? styles.dashboardDark : styles.dashboardLight}>
                  <Grid item xs={1} sm={2}/>
                  <Grid item xs={10} sm={4}>
                      <ShiftListView/>
                  </Grid>
                  <Grid item xs={0} sm={4}>
                      {this.props.width!=='xs' &&  <div><Today/> <Statistics/></div>}
                  </Grid>
                  <Grid item xs={1} sm={2}/>
              </Grid>
          );
      }
  
      _getProgressView = () => {
          return (
              <LinearProgress style={{flexGrow: 1}} color={"secondary"}/>
          )
      }
  
      _getEmptyView = ()=>{
                  return (
                      <div>
                          <center>
                              <Timeline style={!this.state.darkTheme ? {...styles.emptyView, color:colors.grey} : {...styles.emptyView, color: colors.white}} />
                              <Typography variant={"h5"}>No Shifts Logged for now.</Typography>
                              <Typography variant={"subtitle2"}>You can use companion android application to log shifts</Typography>
                          </center>
                      </div>
                  )
      }
  
      _getContentView = ()=>{
          return this.state.isReady ? (this.state.isEmpty ? this._getEmptyView() : this._getDashboardView()) : this._getProgressView()
      }
  
      _switchTheme = () => {
          this.setState({darkTheme: !this.state.darkTheme})
      }
  
      render() {
          return (
              <div style={this.state.darkTheme ? styles.darkRoot : styles.lightRoot}>
                  <TopMenu ref={this.TopMenu}/>
                  <MuiThemeProvider theme={this.state.darkTheme ? darkTheme : lightTheme}>
                      <AppBar position={"static"}>
                          <Toolbar>
                              <IconButton><Timeline style={styles.logo}/></IconButton>
                              <Typography variant={"h6"} style={styles.grow}>{strings.appName}</Typography>
                              <IconButton onClick={()=>{this._switchTheme()}} style={{marginRight:5}}><Brightness6Outlined/></IconButton>
                              {this.props.width!=='xs' ? <Typography>Welcome, {store.getState().displayName}</Typography> : null}
                              <IconButton onClick={(event)=>this.TopMenu.current.open(event)} >
                                  <Avatar src={store.getState().photoURL} style={styles.avatar} />
                              </IconButton>
                          </Toolbar>
                      </AppBar>
                      {this._getContentView()}
                  </MuiThemeProvider>
              </div>
          );
      }
  }
  
  export default withWidth()(Dashboard)