import React, { Component } from 'react';
import Item from './Item';
import ItemForm from './Item/Form';
import SearchBar from './Search';

class Budgets extends Component {
	constructor() {
		super();

    let inputData = {
      items: [
        {
          id: 1,
          summary: "Klevu discovery & calls",
          phase: "dev/Klevu",
          feature: "Klevu",
          budgetHours: { 
            column: "Discovery",
            value: 6,
          },
          descriptions: {
            workplan: [
              "Time for communication with Klevu.",
            ],
            budget: [],
            assumptions: [
              "Accounts for one onboarding call."
            ],
            exclusions: [],
          },
          tags: "klevu",
        },
        {
          id: 2,
          summary: "Install Klevu extension",
          phase: "dev/Klevu",
          feature: "Klevu",
          budgetHours: { 
            column: 'Dev',
            value: 4,
          },
          descriptions: {
            workplan: [
              "Install Klevu extension using composer.",
            ],
            assumptions: [
              "Install extension once using code provided by Klevu."
            ],
          },
          tags: "klevu",
        },
        {
          id: 3,
          summary: "Configure Klevu flyout",
          phase: "dev/Klevu",
          feature: "Klevu",
          budgetHours: { 
            column: 'Dev',
            value: 4,
          },
          descriptions: {
            workplan: [
              "Use Klevu control panel to choose between autocomplete and faceted.",
            ],
            assumptions: [
              "Use one of out of box options provided by Klevu (autocomplete or faceted) without customization.",
            ],
          },
          tags: "klevu",
        },
      ],
    };

    this.state = {
      items: inputData.items.map((item) => (
        item = {
          ...item,
          isVisible:true
        })),
      filter: {
        field: '',
        value: '',
      }
    };

    this.onFilter = this.onFilter.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.onEdit   = this.onEdit.bind(this);
    this.onAdd    = this.onAdd.bind(this);
    this.onDelete = this.onDelete.bind(this);
  }

  onFilter(field, value){
    if(field != null && value != null){
      this.setState({
        items: this.state.items.map((item) => (
          item = {
            ...item,
            isVisible:item[field].toLowerCase().includes(value.toLowerCase()),
          }
        )),
        filter: {
          field: field,
          value: value,
        }
      });  
    }
  }

  onFormSubmit(item){
    this.onAdd(item);
  }

  onAdd(item){
    item = {
      ...item,
      isVisible:item[this.state.filter.field].toLowerCase().includes(this.state.filter.value),
    }

    this.setState({ 
      items: [
        ...this.state.items,
        item,
      ],
    });
  }

  onEdit(updatedItem){
    updatedItem = {
      ...updatedItem,
      isVisible:updatedItem[this.state.filter.field].toLowerCase().includes(this.state.filter.value),
    }

    this.setState({
      items: this.state.items.map(item => updatedItem.id === item.id ? updatedItem : item),
    })
  }

  onDelete(itemId) {
    this.setState({
      items: this.state.items.filter(item => item.id !== itemId),
    });
  }

  render() {
    return (
      <div>
        <div className="panel-uc panel panel-default">
          <div className="panel-uc__heading panel-heading clearfix">
            <h4>Budget Tool</h4>
          </div>
        </div>
        <div className="row panel-body">
          <div className="panel-body projects__wrapper">
            <ItemForm
              onSubmit={this.onFormSubmit}
            />
            <h2> Items </h2>
            <SearchBar 
              onFilter={this.onFilter}
            />
            {this.state.items.map(item => 
              item.isVisible && (
              <Item 
                item={item}
                onEdit={this.onEdit}
                onDelete={this.onDelete}
                key={item.id}
              />
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default Budgets;

@@ -2333,16 +2333,17 @@
 lue)
+ 
 %7B%0A    if
 (fie
@@ -2342,16 +2342,17 @@
   if
+ 
 (field 
-!
+=
 = nu
@@ -2367,20 +2367,40 @@
 lue 
-!
+=
 = null)
+ 
 %7B%0A  
+    return;%0A    %7D%0A%0A
     
@@ -2411,26 +2411,24 @@
 .setState(%7B%0A
-  
       items:
@@ -2464,33 +2464,24 @@
 =%3E (%0A       
-   item =
  %7B%0A         
@@ -2473,34 +2473,32 @@
     %7B%0A          
- 
- 
 ...item,%0A       
@@ -2482,34 +2482,32 @@
        ...item,%0A
-  
           isVisi
@@ -2506,24 +2506,25 @@
   isVisible:
+ 
 item%5Bfield%5D.
@@ -2572,30 +2572,26 @@
 )),%0A        
-  %7D%0A  
+%7D%0A
       )),%0A  
@@ -2584,26 +2584,24 @@
 %7D%0A      )),%0A
-  
       filter
@@ -2611,25 +2611,16 @@
 %0A       
-   field:
  field,%0A
@@ -2626,25 +2626,16 @@
 %0A       
-   value:
  value,%0A
@@ -2636,30 +2636,26 @@
 alue,%0A      
- 
- 
 %7D%0A
-  
     %7D);  %0A  
@@ -2652,22 +2652,16 @@
   %7D);  %0A
-    %7D%0A
   %7D%0A%0A  o

Clean up filter function