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 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() {
    interval = setInterval(() => {
      if (lastUpdateTime && Date.now() - lastUpdateTime > 2000) {
        const {
          category,
          options,
          subcategory,
          onItemsChanged,
          onUserDataChange
        } = this.props;
        let url = createOlxLink(category, subcategory, options);
        url = encodeURI(url);
        onUserDataChange({ info: "olx_url", value: url });
        if (url) {
          axios
            .get(`/api/${url}`)
            .then(response => {
              onItemsChanged(response.data.items);
              onUserDataChange({
                info: "last_date",
                value: response.data.last_date
              });
            })
            .catch(error => console.log(error));
        }
        lastUpdateTime = null;
      }
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(interval);
  }
  componentWillReceiveProps(newProps) {
    const { subcategory, category, options } = this.props;
    if (
      newProps.subcategory !== subcategory ||
      newProps.category !== category ||
      !areObjectEqual(newProps.options, options)
    ) {
      lastUpdateTime = Date.now();
    }
  }

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

    return (
      <div className={classes.wrapper}>
        <Sidebar logoText={"Market Alarm"} logo={logo} image={image} />

        <div className={classes.mainPanel}>
          <ItemsContainer />
          {items.length ? <NotificationModal /> : null}
        </div>
      </div>
    );
  }
}
App.propTypes = {
  classes: PropTypes.object.isRequired
};

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