import moment from 'moment';
import numeral from 'numeral';
import FilterList from './filterList.jsx';
import PeriodSelector from './periodSelector.jsx';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getToken } from '../utils/helpers.jsx';
import { invoiceList } from '../actions/invoiceActions';
import { reset } from 'redux-form';
import Invoice from './invoice.jsx';

class InvoiceList extends Component {
  /**
   * Initiele actie dispatchen
   */
  componentWillMount() {
    let { dispatch, params } = this.props;

    let now = moment();
    let medium = params.medium;
    let dateFrom = `${now.format('YYYY-MM')}-01`;
    let dateTo = moment(dateFrom).add(1, 'month').subtract(1, 'day').format('YYYY-MM-DD');

    this.updateState(medium, dateFrom, dateTo, null);
    dispatch(invoiceList(medium, dateFrom, dateTo, null));
  }

  /**
   * Update wanneer de props veranderen
   */
  componentDidUpdate(prevProps, prevState) {
    let { dispatch, params } = this.props;
    if(prevProps.params !== params) {
      let medium = params.medium;
      let now = moment();
      let dateFrom = `${now.format('YYYY-MM')}-01`;
      let dateTo = moment(dateFrom).add(1, 'month').subtract(1, 'day').format('YYYY-MM-DD');

      dispatch(invoiceList(medium, dateFrom, dateTo, null));
      dispatch(reset('periodSelector'));
    }
  }

  /**
   */
  updateState(medium, dateFrom, dateTo, filter) {
    this.setState({
      medium,
      dateFrom,
      dateTo,
      filter,
    });
  }

  /**
   * FIlter op sternummer/product naam
   */
  handleFilter(data) {
    let { dispatch, params } = this.props;
    let { medium, dateFrom, dateTo, filter } = this.state;

    if(data && data.search) {
      this.updateState(medium, dateFrom, dateTo, data.search);
      dispatch(invoiceList(medium, dateFrom, dateTo, data.search));
    }
    else {
      this.updateState(medium, dateFrom, dateTo, null);
      dispatch(invoiceList(medium, dateFrom, dateTo, null));
    }
  }

  /**
   * Refresh for period
   */
  handleRefresh(data) {
    if(data.month && data.year) {
      // er is iets ingevuld
      let { dispatch, params } = this.props;
      let medium = params.medium;
      let dateFrom = moment(`${data.year}/${data.month}/1`).format('YYYY-MM-DD');
      let dateTo = moment(dateFrom).add(1, 'month').subtract(1, 'day').format('YYYY-MM-DD');

      this.updateState(medium, dateFrom, dateTo, null);
      dispatch(invoiceList(medium, dateFrom, dateTo, null));
    }
  }

  /**
   * Render method
   */
  render() {
    const { invoiceList } = this.props;

    let list = null;
    if(invoiceList && invoiceList.size > 0) {
      list = (<div className="listContent">
        {invoiceList.map((i) => (<Invoice key={i.internalInvoiceId} {...i} />))}
      </div>);
    }
    else{
      list = (<div className="listContent">
        <p>Geen facturen gevonden.</p>
      </div>);
    }

    return (<div className="listContent">
      <div className="portalMainForm">
        <div className="screenTitle">Facturen</div>
        <div className="formWrapper moveUp">
          <div className="formInput filterField">
            <FilterList onFilter={this.handleFilter.bind(this)} />
          </div>
          <div className="formInput periodSelector">
            <PeriodSelector onRefresh={this.handleRefresh.bind(this)} future={false} />
          </div>
        </div>
      </div>
      {list}
    </div>);
  }
}

const mapStateToProps = (state) => {
  return {
    invoiceList: state.invoiceList
  };
};

export default connect(mapStateToProps)(InvoiceList);