import React from "react";
import Select from "react-select";
import { connect } from "react-redux";
import {
  CATEGORY_SELECT,
  ITEMS_CHANGED,
  USER_DATA_CHANGED
} from "constants/actionTypes";
import { hoc, areObjectEqual } from "utils/helpers";
import { createOlxLink } from "utils/createOlxLink";
import axios from "axios";

import * as Vozila from "./categories/Vozila";
import * as Nekretnine from "./categories/Nekretnine";

import DeepCategoryWrapper from "components/widgets/DeepCategoryWrapper";
import ItemsContainer from "./items/itemscontainer/ItemsContainer";
import NotificationModal from "./NotificationModal";

const options = [
  { value: "Vozila", label: "Vozila" },
  { value: "Nekretnine", label: "Nekretnine" }
];

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

const mapDispatchToProps = dispatch => ({
  onCategoryChanged: option => dispatch({ type: CATEGORY_SELECT, option }),
  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();
    }
  }
  handleChange = selectedOption => {
    this.props.onCategoryChanged(selectedOption);
  };

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

    return (
      <div>
        <Select
          value={category}
          onChange={this.handleChange}
          options={options}
        />
        {hoc(category && category.value, {
          Vozila: <DeepCategoryWrapper {...Vozila.properties} />,
          Nekretnine: <DeepCategoryWrapper {...Nekretnine.properties} />
        })}
        <ItemsContainer />
        {items.length ? <NotificationModal /> : null}
      </div>
    );
  }
}

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