import moment from 'moment';
import numeral from 'numeral';
import OrderDetails from './orderDetails.jsx';
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { PORTAL_API_PATH } from '../constants/appConstants';
import { summary } from '../actions/campaignActions';

class Summary extends React . Component {
  /** */
  constructor(props) {
    super();
  }

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

    this.props.dispatch(summary(medium, orderId));
    let { spots } = this.props;
    let spotData = spots.get('data');
  }

  /** */
  componentDidUpdate(prevProps, prevState) {
    let { spots } = this.props;
    let spotData = spots.get('data');
    let { medium, orderId } = this.props.params;
  }

  /**
   * Render method;
   */
  render() {
    let { spots } = this.props;
    let { medium, orderId } = this.props.params;
    let spotData = spots.get('data');
    if(!spotData) {
      return (<div className="listContent">
        <p>Geen spots gevonden.</p>
      </div>);
    }

    let spotArray = spotData.spots;
    let pdfUrl = `${orderId}`;

    let order = {
      orderBudget: spotData.orderBudget,
      orderEndDate: spotData.orderEndDate,
      orderId: spotData.orderId,
      orderStartDate: spotData.orderStartDate,
      productDescr: spotData.productDescr,
      productId: spotData.productId,
      totalReqGrp: spotData.totalReqGrp,
    };

    let channel = spotData.medium;
    if(spotData.medium === 'tv') {
      channel = 'televisie';
    }

    let summaryList = (<div className="summaryList">
      <p>Geen spots gevonden.</p>
    </div>);
    if(spotArray.length > 0) {
      let totalCount = 0;
      let totalGross = 0;
      let totalDiscount = 0;
      let totalNetto = 0;
      let totalNettoAfterBonus = 0;
      summaryList = (<div className="summaryList borderedBlock">
          <table className="blockContent">
            <thead>
              <tr>
                <th width="100">&#160;</th>
                <th>Aantal spots</th>
                <th>Bruto</th>
                <th>Korting</th>
                <th>Netto</th>
                <th>Netto na bonus</th>
              </tr>
            </thead>
          {spotArray.map((s) => {
            totalCount += s.totalCount;
            totalGross += s.totalGross;
            totalDiscount += s.totalDiscount;
            totalNetto += s.totalNetto;
            totalNettoAfterBonus += s.totalNetAfterBonus;

            return (
                <tr>
                  <td><img src={`/Images/logos/small/${channel + s.channelId}.png`}
                         width="100" alt={`Zender: ${s.channelDescr}`} /></td>
                  <td className="summary">{numeral(s.totalCount).format('0,000')}</td>
                  <td className="summary">{numeral(s.totalGross).format('$ 0,000')}</td>
                  <td className="summary">{numeral(s.totalDiscount).format('$ 0,000')}</td>
                  <td className="summary">{numeral(s.totalNetto).format('$ 0,000')}</td>
                  <td className="summary">{numeral(s.totalNetAfterBonus).format('$ 0,000')}</td>
                </tr>
              );})}
            <tr className="summaryTotal">
              <td>Totaal</td>
              <td className="summary">{numeral(totalCount).format('0,000')}</td>
              <td className="summary">{numeral(totalGross).format('$ 0,000')}</td>
              <td className="summary">{numeral(totalDiscount).format('$ 0,000')}</td>
              <td className="summary">{numeral(totalNetto).format('$ 0,000')}</td>
              <td className="summary">{numeral(totalNettoAfterBonus).format('$ 0,000')}</td>
            </tr>
          </table>
      </div>);
    }

    return (<div className="listContent">
      <OrderDetails advertiserName={spotData.advertiserName} order={order} />

      <div className="tablist">
        <Link to={`campaigns/${medium}/${orderId}`}>Campagne in detail</Link>
        { medium !== 'inter' ? <Link to={`campaigns/${medium}/spots/${orderId}`}>Uitzendschema</Link> : null }
        <Link className="active" to={`campaigns/${medium}/summary/${orderId}`}>Samenvatting</Link>
      </div>

      <div className="uitzendschemaToolbar">
        <div className="downloadText">
          <label>Download volledige schema als:</label>
          <div className="downloadBtn">
            <a target="_blank" href={`${PORTAL_API_PATH}/spots/${pdfUrl}.pdf`}>
              PDF
            </a>
          </div>
          <div className="downloadBtn">
            <a target="_blank" href={`${PORTAL_API_PATH}/spots/${pdfUrl}.xls`}>
              Excel
            </a>
          </div>
        </div>
      </div>

      {summaryList}
    </div>);
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    spots: state.summary
  };
};

export default connect(mapStateToProps)(Summary);