import React from "react";
import PropTypes from "prop-types";
import withStyles from "@material-ui/core/styles/withStyles";
import { connect } from "react-redux";
import { ITEMS_CHANGED, USER_DATA_CHANGED } from "../constants/actionTypes";
import { areObjectEqual } from "../utils/helpers";
import { createOlxLink } from "../utils/createOlxLink";
import axios from "axios";

import image from "../assets/img/sidebar-1.jpg";
import logo from "../assets/img/reactlogo.png";

import Sidebar from "../components/Sidebar.js";
import ItemsContainer from "./items/itemscontainer/ItemsContainer";
import NotificationModal from "./NotificationModal";
import StepWizard from 'react-step-wizard';
import dashboardStyle from "../assets/dashboardStyle.js";

const mapStateToProps = state => {
  return {
    category: state.category,
    options: state.options,
    subcategory: state.subcategory,
    items: state.items,
    userdata: state.userdata
  };
};

const mapDispatchToProps = dispatch => ({
  onItemsChanged: items => dispatch({ type: ITEMS_CHANGED, items }),
  onUserDataChange: change => dispatch({ type: USER_DATA_CHANGED, ...change })
});

let lastUpdateTime = null;
let interval = null;
class App extends React.Component {
  componentDidMount() {
  }

  componentWillUnmount() {
  }
  componentWillReceiveProps(newProps) {
  }

  render() {
    const { items, classes } = this.props;

    return (
      <div className={classes.wrapper}>
        <StepWizard>
           <Sidebar />
           <NotificationModal />
        </StepWizard>
      </div>
    );
  }
}
App.propTypes = {
  classes: PropTypes.object.isRequired
};

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