import moment from 'moment';
import PeriodSelector from './periodSelector.jsx';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { contractList } from '../actions/contractActions';
import { getToken } from '../utils/helpers.jsx';
import { Link } from 'react-router';
import { PORTAL_API_PATH } from '../constants/appConstants';
import { reset } from 'redux-form';

class ContractList extends Component {
  /**
  * Constructor for contracts
  */
  constructor(props) {
    super(props);
  }

  /** */
  componentWillMount() {
    let {
      dispatch,
      params
    } = this.props;

    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(contractList(medium, dateFrom, dateTo));
  }

  /**
   * Update formulier wanneer de props veranderen
   */
  componentDidUpdate(prevProps, prevState) {
    let {
      dispatch,
      params
    } = this.props;

    if (prevProps.params !== params) {
      let medium = this.props.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(contractList(medium, dateFrom, dateTo));
      dispatch(reset('periodSelector'));
    }
  }

  /**
   * 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');
      dispatch(contractList(medium, dateFrom, dateTo));
    }
  }

  /**
  * Campaign form
  */
  render() {
    let medium = this.props.params.medium;
    let { contracts } = this.props;
    let colors = ['bg-blauw-middel', 'bg-groen-middel', 'bg-magenta-middel', 'bg-oranje-licht'];
    let colorIdx = 0;

    let contractArray = contracts;
    let list = null;

    if(!contracts || contracts.count() === 0) {
      list = (<div className="listContent">
        <p>Geen contracten gevonden.</p>
      </div>);
    }
    else {
      list = (
            <div className="listContent">
              <div className="outer">
                <div className="row no-margin-bottom">
                {contractArray.map((c) => {
                  let name = c.advName + c.concernName;
                  let contractStartDate = moment(c.startDate).format('D MMMM YYYY');
                  let contractEndDate = moment(c.endDate).format('D MMMM YYYY');
                  let contractURL = `/portaal/contracts/${medium}/${c.contractId}`;
                  if (colorIdx === 3) {
                    colorIdx = 0;
                  }
                  else {
                    colorIdx += 1;
                  }

                  return (
                    <div className="medium-4 columns end">
                        <div className={`${colors[colorIdx]} contractBlock gelijke-hoogte clickable`}>
                            <h3>{name}</h3>
                          <p>{contractStartDate} - {contractEndDate}</p>
                          <p><a className="contractLink" href={contractURL}></a></p>
                        </div>
                    </div>
                    );
                })}
                </div>
              </div>
            </div>);
    };

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

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

export default connect(mapStateToProps)(ContractList);