import Advertiser from './advertiser.jsx';
import FilterList from './filterList.jsx';
import moment from 'moment';
import PeriodSelector from './periodSelector.jsx';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { orderList } from '../actions/campaignActions';
import { reset } from 'redux-form';

class CampaignList extends Component {
  /**
   *
   */
  componentWillMount() {
    let { dispatch, params } = this.props;
    let filter = null;
    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');

    this.updateState(medium, dateFrom, dateTo, filter);
    dispatch(orderList(medium, dateFrom, dateTo, filter));
  }

  /**
   * Update lijst wanneer de props veranderen
   */
  componentDidUpdate(prevProps, prevState) {
    let { dispatch, params } = this.props;
    let { dateFrom, dateTo, filter } = this.state;

    if(prevProps.params !== params) {
      let now = moment();
      let medium = params.medium;

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

      dispatch(reset('periodSelector'));
      dispatch(reset('filterList'));

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

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

  /**
   * Refresh for period
   */
  handleRefresh(data) {
    let { dispatch } = this.props;
    let { medium, dateFrom, dateTo, filter } = this.state;

    if(data.month && data.year) {
      // er is iets ingevuld
      dateFrom = moment(`${data.year}/${data.month}/1`).format('YYYY-MM-DD');
      dateTo = moment(dateFrom)
        .add(1, 'month').subtract(1, 'day').format('YYYY-MM-DD');
    }
    else {
      let now = moment();
      dateFrom = `${now.format('YYYY-MM')}-01`;
      dateTo = moment(dateFrom).add(1, 'month').subtract(1, 'day').format('YYYY-MM-DD');
    }

    this.updateState(medium, dateFrom, dateTo, filter);
    dispatch(orderList(medium, dateFrom, dateTo, filter));
  }

  /**
   *
   */
  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(orderList(medium, dateFrom, dateTo, data.search));
    }
    else {
      this.updateState(medium, dateFrom, dateTo, null);
      dispatch(orderList(medium, dateFrom, dateTo, null));
    }
  }

  /**
  * Campaign form
  */
  render() {
    let { orders } = this.props;
    let list = (<div className="listContent">
      <p>Geen campagnes gevonden.</p>
    </div>);

    if(orders.size > 0) {
      list = (<div className="listContent">
        <div>{orders.map((a) => (<Advertiser key={a.advertiserId} {...a} />))}</div>
      </div>);
    }

    return (<div>
      <div className="portalMainForm">
        <div className="screenTitle">Campagnes</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 {
    orders: state.orders
  };
};

export default connect(mapStateToProps)(CampaignList);