import React, { Component } from 'react';
import { Link } from 'react-router';
import moment from 'moment';
import numeral from 'numeral';
import ShowDetailsLink from './showDetailsLink.jsx';

class Campaign extends Component {
  /** */
  render() {
    let {
      mediumId,
      orderStartDate,
      orderEndDate,
      orderBudget,
      productId,
      orderId,
      totalReqGrp,
      totalPageViews,
      totalBookedBudget,
      totalBookedGrp,
      name
    } = this.props;

    let dateFrom = moment(orderStartDate).format('YYYY-MM-DD');
    let dateTo = moment(orderEndDate).subtract(1, 'day').format('YYYY-MM-DD');
    let formattedStart = moment(orderStartDate).format('D MMMM YYYY');
    let formattedEnd = moment(orderEndDate).format('D MMMM YYYY');
    let budgetReq = numeral(orderBudget).format('$ 0,000');
    let grpsReq = numeral(totalReqGrp).format('0.0');
    let budgetBooked = numeral(totalBookedBudget).format('$ 0,000');
    let grpsBooked = numeral(totalBookedGrp).format('0.0');
    let pageViews = numeral(totalPageViews).format('000,000,000');
    let orderPartPath = `/campaigns/${mediumId}/${orderId}`;

    let orderDetails = '';
    if (mediumId === 'inter') {
      orderDetails = (
        <table className="blockContent">
          <thead>
            <tr>
              <th>Sternr</th>
              <th>Periode</th>
              <th width="100%">&#160;</th>
              <th>Budget</th>
              <th>&#160;</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="sterNr">{productId}</td>
              <td className="periode">{formattedStart} - {formattedEnd}</td>
              <td>&#160;</td>
              <td className="budget">{budgetReq}</td>
              <td className="detailLink">
                <ShowDetailsLink link={orderPartPath} />
              </td>
            </tr>
          </tbody>
        </table>);
    }
    else{
      orderDetails = (
        <table className="blockContent">
          <thead>
            <tr>
               <th>&#160;</th>
               <th>&#160;</th>
               <th>&#160;</th>
               <th className="headerCenter">GRP's</th>
               <th className="headerCenter">GRP's</th>
               <th className="headerCenter">Budget</th>
               <th className="headerCenter">Budget</th>
            </tr>
            <tr>
              <th>Sternr</th>
              <th>Periode</th>
              <th width="100%">&#160;</th>
              <th>Aangevraagd</th>
              <th>Geboekt</th>
              <th>Aangevraagd</th>
              <th>Geboekt</th>
              <th>&#160;</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="sterNr">{productId}</td>
              <td className="periode">{formattedStart} - {formattedEnd}</td>
              <td>&#160;</td>
              <td className="grps">{grpsReq}</td>
              <td className="grps">{grpsBooked}</td>
              <td className="budget">{budgetReq}</td>
              <td className="budget">{budgetBooked}</td>
              <td className="detailLink">
              <ShowDetailsLink link={orderPartPath} />
              </td>
            </tr>
          </tbody>
        </table>);
    }

    return (
      <div className="campaignItem borderedBlock">
        <h3 className="blockTitle">
          <Link to={orderPartPath}>{name}</Link>
        </h3>
        {orderDetails}
      </div>
      );
  }
}

export default Campaign;