import React, { Component } from 'react';
import transactions from './transactions';
import TableList from './Table';
import Buttons from './Buttons';

// Get current month for filter
const currMonth = new Date();

const operators = {
  '>': function(a, b) {
    return a > b;
  },
  '===': function(a, b) {
    return a === b;
  }
};

class App extends Component {
  state = {
    type: 'all',
    value: '',
    date: '',
    btn: [
      {
        id: 1,
        btnLabel: 'income',
        btnClass: 'inactive',
        conditionValue: 'income',
        conditionKey: 'type',
        conditionOperator: '==='
      },
      {
        id: 2,
        btnLabel: 'expenditure',
        btnClass: 'inactive',
        conditionValue: 'expenditure',
        conditionKey: 'type',
        conditionOperator: '==='
      },
      {
        id: 3,
        btnLabel: 'last month',
        btnClass: 'inactive',
        conditionValue: '1',
        conditionKey: 'date',
        conditionOperator: '==='
      },
      {
        id: 4,
        btnLabel: 'more than 1000rub',
        btnClass: 'inactive',
        conditionValue: '1000',
        conditionKey: 'value',
        conditionOperator: '>'
      }
    ]
  };

  onFilterToggle = (type, value) => {
    if (!this.state[type]) {
      this.setState({ [type]: value });
    } else {
      this.setState({ [type]: '' });
    }
  };

  filterUp(item, operator, param) {
    return operators[operator](item, param);
  }

  filterArray() {
    let typeParam;
    let valueParam;
    let dateParam;
    typeParam = this.state.type;
    valueParam = this.state.value;
    dateParam = this.state.date;

    if (typeParam === 'all') {
      typeParam = '';
    }
    let filterArr = transactions.slice();
    filterArr = filterArr.filter(
      item =>
        this.filterUp(item.type, '>', typeParam) &&
        this.filterUp(item.value, '>', valueParam) &&
        this.filterUp(item.date, '>', dateParam)
    );
    // /transactions.filter (trns => filters.every(filter => filter(trans))
    console.log(filterArr);
    return filterArr;
  }

  render() {
    const { filterType, filterValue, filterDate, btn } = this.state;
    // make copy of original array for filters
    const filteredArray = this.filterArray();
    return (
      <div>
        <Buttons
          items={btn}
          onFilterToggle={this.onFilterToggle}
          onActiveToggle={this.onActiveToggle}
        />
        <TableList items={filteredArray} />
      </div>
    );
  }
}

export default App;