import React from 'react'
import PropTypes from 'prop-types'
// Import React-JSS
import injectSheet from 'react-jss'

/* IMPORT COMPONENTS */
import MenuC from './components/Menu/MenuC'
import FeedHomeC from './components/Feed/FeedHomeC'
import StatsHomeC from './components/Statistics/StatsHomeC'
import NotificationHomeC from './components/Notifications/NotificationHomeC'

const styles = {
  topRowCSS: {
    margin: '2% 5%',
    backgroundColor: '#D3D3D3',
    height: '500px'
  },
  bottomRowCSS: {
    margin: '2% 5%',
    backgroundColor: '#D3D3D3',
    height: '400px'
  },
  columnItems: {
    width: '50%'
  }
}

const HomeV = (props) => {
  return (
    <div className={`container-fluid`}>
      <MenuC />
      <div className={`row ${props.classes.topRowCSS}`}>
        <FeedHomeC />
      </div>
      <div className={`row ${props.classes.bottomRowCSS}`}>
        <div className={`col ${props.classes.columnItems}`}>
          <StatsHomeC statsSubmit={props.statsSubmit} />
        </div>
        <div className={`col ${props.classes.columnItems}`}>
          <NotificationHomeC />
        </div>
      </div>

    </div>
  )
}

HomeV.propTypes = {
  statsSubmit: PropTypes.func,
  classes: PropTypes.object
}

export default injectSheet(styles)(HomeV)
