import React, { Component } from 'react';
import DynamicList from './DynamicList';

export default class MobilePanel extends Component {
  constructor(props){
    super(props);
    this._getCategory = this._getCategory.bind(this);
    this._getSubs = this._getSubs.bind(this);
    this._interceptItem = this._interceptItem.bind(this);
    this.state = { figure: ()=>{}, options: [], title: "CATEGORIES", listClass: "shop-items", item: "" }
  }

  componentWillMount() {
    this._getCategory();
    this.setState({figure: this._getSubs});
  }

  _getSubs(category){
    let options = [];
    const { actions } = this.props;
    if(category === "Show All") return this._interceptItem(category);
    actions.rawData.forEach(item=>{
      if(item.category === category && options.indexOf(item.sub) < 0) options.push(item.sub);
      else if(category === "Go Back" && options.indexOf(item.sub) < 0) return this._getCategory();
    });
    options.push("Go Back");
    this.setState({ options, figure: this._interceptItem, title: category, item: "", listClass: "shop-items reload" });
  }

  _getCategory(){
    const { actions } = this.props;
    let options = [];
    actions.rawData.forEach(({ category })=>{
      options.indexOf(category) < 0 && options.push(category);
    });
    options.push("Show All");
    this.setState({ options, figure: this._getSubs, listClass: "shop-items" });
  }

  _interceptItem(item){
    item === "Show All" ? this.setState({title: "CATEGORY", item: ""}) : this.setState({ item: "/ "+item });
    this.props.actions.shop("", "no-display", true);
    this.props.actions.setFigure(item);
  }

  render() {
    const { actions } = this.props;
  	let options = [];
    actions.rawData.forEach(({ category })=>{
      if(options.indexOf(category) < 0) options.push(category)
    });
    options.push("Show All");
    const filters = [50000, 200000, 500000, 1000000];
    const className = `mobile-panel`;
    const inline = { minHeight: actions.height }
    const shop = actions.knob ? "shop-items" : "shop-items no-display";
    const filter = actions.knob ? "filter-items no-display" : "filter-items";
    return (
      <section className={className} style={inline}>
        <DynamicList list={this.state.options} back={this._getCategory} figure={this.state.figure} listClass={shop} />
        <DynamicList list={filters} selectClass="select-button" reArrange={true} price={actions.setPrice} listClass={filter} />
        <button className="mobile-panel" onClick={actions.custom}>MAKE A CUSTOM ORDER</button>
        <button className="mobile-panel" onClick={()=>actions.shop("", "no-display", true)}>BACK TO SHOP</button>
      </section>
    );
  }
}
@@ -556,16 +556,22 @@
 category
+, item
 )%7B%0A    l
@@ -583,24 +583,53 @@
 tions = %5B%5D;%0A
+    item = item ? item : %22%22;%0A
     const %7B 
@@ -682,16 +682,45 @@
 how All%22
+ %7C%7C category === %22CATEGORIES%22
 ) return
@@ -783,18 +783,20 @@
 ach(item
+ 
 =%3E
+ 
 %7B%0A      
@@ -1098,20 +1098,16 @@
 ry, item
-: %22%22
 , listCl
@@ -1155,16 +1155,20 @@
 ategory(
+ctgy
 )%7B%0A    c
@@ -1194,24 +1194,124 @@
 this.props;%0A
+    if (ctgy) return this._getSubs(ctgy%5B0%5D, ctgy%5B1%5D);%0A    if (actions.rawData.length === 0) return;%0A
     let opti
@@ -1572,24 +1572,78 @@
 Item(item)%7B%0A
+    item = item === %22CATEGORIES%22 ? %22Show All%22 : item;%0A
     item ===
@@ -1766,53 +1766,8 @@
 ons.
-shop(%22%22, %22no-display%22, true);%0A    this.props.
 acti
@@ -2548,16 +2548,70 @@
 -button%22
+ filter=%7Bactions.filter%7D setFilter=%7Bactions.setFilter%7D
  reArran

Fix Filter Button in MobilePanel