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

class OrderDetails extends Component {
  /** */
  render() {
    let {
      advertiserName,
      order
    } = this.props;

    let formattedStart = moment(order.orderStartDate).format('D MMMM YYYY');
    let formattedEnd = moment(order.orderEndDate).format('D MMMM YYYY');
    let budgetReq = numeral(order.orderBudget).format('$ 0,000');
    let budgetBooked = numeral(order.totalBookedBudget).format('$ 0,000');
    let grpsReq = numeral(order.totalReqGrp).format('0.0');
    let grpsBooked = numeral(order.totalBookedGrp).format('0.0');
    let pageViews = numeral(order.totalPageViews).format('000,000,000');

    let orderDetails = '';
    let preview = '';
    if (order.mediumId === 'inter') {
      if(order.previewURL !== '') {
        preview = (<div className="downloadBtn">
                <a target="_blank"
                   href={order.previewURL}>
                  Preview
                </a>
              </div>);
      }

      orderDetails = (
         <table className="blockContent">
            <thead>
              <tr>
                <th>Sternr</th>
                <th>Periode</th>
                <th width="100%">&#160;</th>
                <th>Aangevraagd Budget</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="sterNr">{order.productId}</td>
                <td className="periode">{formattedStart} - {formattedEnd}</td>
                <td>&#160;</td>
                <td className="budget">{budgetReq}</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>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="sterNr">{order.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>
              </tr>
            </tbody>
          </table>);
    }

    return (
      <div>
        <h2 className="advertiserName">{advertiserName}</h2>

        <div className="orderDetails borderedBlock">
          <h3 className="blockTitleWhite">{order.productDescr} {preview}</h3>
          {orderDetails}
        </div>
      </div>);
  }
}

export default OrderDetails;