import React from "react";
import { connect } from "react-redux";
import { dispatchOnly, getData, getProducts } from "../../../actions/action.js";
import { commonStyle } from "../../../common/StylesSheet.js";
import SortFilter from "./components/SortFilter/SortFilter.js";
import Products from "./components/Products/Products.js";

import { View } from "react-native";

/**
 * Modified by MaRoCa on 02/05/2020.
 */

class ProductListScreen extends React.Component {
  state = {
    selected_brand: "",
    limit: 20,
    page: 1,
    search_value: "",
    filter_by: {},
    sort_by: "",
    refreshCart: false,
    searchField: ''

  };

  componentDidMount() {
    const json = { reducer_type: "FETCHING_DATA", params: {} };
    this.props.dispatch(json);
    this.getInventory();
  }

  getInventory = () => {
    const category = this.props.category;
    const json = {
      reducer_type: "FETCH_PRODUCT",
      path: "husky/getstoreinventory",
      params: {
        category: category,
        brand: this.state.selected_brand,

      }
    };

    this.props.getInventory(json);
  };

  getBrands = category => {
    const json = {
      reducer_type: "FETCH",
      path: "husky/getbrands",
      params: {
        category: category,

      }
    };
    this.props.getBrands(json);
  };

  handleLoadMore = () => {
    let { page } = this.state;
    page += 1;
    this.setState(
      {
        page: page
      },
      () => {
        this.getInventory();
      }
    );
  };

  search = () => {
    this.state.selected_brand = "";
    this.state.limit = 50;
    this.showLoading();
    this.getInventory();
  };

  showLoading = () => {
    const json = { reducer_type: "FETCHING_DATA", params: {} };
    this.props.dispatch(json);
  };

  getQuantity = items => {
    const cart_items = this.props.cart;
    let data = [];
    items = items ? items : [];
    items.map(item => {
      const tmp = cart_items.filter(cart_item => cart_item.sku === item.sku);
      if (tmp.length > 0) {
        item.quantity = tmp[0].quantity;
      }
      data.push(item);
    });
    return data;
  };

  updateSortFilter = (value, type) => {
    this.setState(
      {
        [type]: value
      },
      () => {
        this.getInventory();
      }
    );
  };

  extractProduct = () => {
    const category = this.props.category.toLowerCase().replace(/\s+/g, "");
    const data = this.getQuantity(
      this.props.products[category === "" ? "allproducts" : category]
    );
    console.log('data',data)
    const filteredProducts = data.filter(value=>{
      return value.description.toLowerCase().includes(this.state.searchField.toLowerCase())
    })
    return filteredProducts;
  };

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

    return (
      <View style={[commonStyle.content, { flex: 1 }]}>
        <SortFilter
          modalMarginTop={
            this.props.sortFilterModalMarginTop
              ? this.props.sortFilterModalMarginTop
              : 154
          }
          updateSortFilter={this.updateSortFilter}
        />
        <Products
          data={this.extractProduct()}
          numberColumn={3}
          navigation={this.props.navigation}
          dispatch={this.props.dispatch}
          loadMore={this.handleLoadMore}
          viewDetail={true}
          isLoading={isLoading}
        />
      </View>
    );
  }
}

const mapStateToProps = state => {
  const products = state.product;
  const loading = state.loading.isFetching;
  return {
    products: products,
    cart: state.cart,
    isLoading: loading
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getInventory: param => {
      dispatch(getProducts(param));
    },
    getBrands: param => {
      dispatch(getData(param));
    },
    dispatch: param => {
      dispatch(dispatchOnly(param));
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(ProductListScreen);