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

import Vozila from "./categories/Vozila";
import Nekretnine from "./categories/Nekretnine";
import ItemsContainer from "./items/itemscontainer/ItemsContainer";

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
  };
};

const mapDispatchToProps = dispatch => ({
  onCategoryChanged: option => dispatch({ type: CATEGORY_SELECT, option }),
  onItemsChanged: items => dispatch({ type: ITEMS_CHANGED, items })
});

class App extends React.Component {
  handleChange = selectedOption => {
    this.props.onCategoryChanged(selectedOption);
  };

  getDataFromOlx = () => {
    const { category, options, subcategory, onItemsChanged } = this.props;
    let url = createOlxLink(category, subcategory, options);
    url = encodeURI(url);
    axios
      .get(`/api/${url}`)
      .then(response => onItemsChanged(response.data))
      .catch(error => console.log(error));
  };

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

    return (
      <div>
        <Select
          value={category}
          onChange={this.handleChange}
          options={options}
        />
        {hoc(category && category.value, {
          Vozila: <Vozila />,
          Nekretnine: <Nekretnine />
        })}
        <button onClick={this.getDataFromOlx}>Get Data from OLX </button>
        <ItemsContainer />
      </div>
    );
  }
}

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