import React, { Component } from 'react';
import { Link } from 'react-router';
import moment from 'moment';
import numeral from 'numeral';

class OrderPart extends Component {
  /**
   * Constructor for OrderPart class
   */
  constructor(props) {
    super(props);
    this.state = {
      hidden: true
    };
  }

  /**
   *
   */
  handleEnter(event) {
    event.preventDefault();
    this.setState({
      hidden: false
    });
  }

  /**
   *
   */
  handleLeave(event) {
    event.preventDefault();
    this.setState({
      hidden: true
    });
  }

  /** */
  render() {
    let { order, showUitzendschemaLink } = this.props;

    let dateFrom = moment(order.orderPartStartDate).format('YYYY-MM-DD');
    let dateTo = moment(order.orderPartEndDate).subtract(1, 'day').format('YYYY-MM-DD');
    let orderPartStartDate = moment(order.orderPartStartDate).format('D MMMM YYYY');
    let orderPartEndDate = moment(order.orderPartEndDate).format('D MMMM YYYY');
    let spotLengths = '';
    let uriPrefix = `/campaigns/${order.medium}/spots`;
    let uitzendSchemaPath = `${uriPrefix}/${order.orderId}/${order.orderPartId}`;
    let budgetReq = 0;
    let budgetBooked = 0;
    let valueVisible = 'valueVisible';
    let specOrderPart = '';
    let complete = 0;
    let ctr = 0;
    if (order.totalStarts > 0) {
      complete = (order.totalComplete / order.totalStarts) * 100;
    }
    if (order.totalClicks > 0) {
      ctr = (order.totalClicks / order.totalImpressions) * 100;
    }

    if (order.spotTypeId === 'DLGRP') {
      budgetReq = order.requestedBudget;
      budgetBooked = order.orderPartBooked;
      specOrderPart = '';
    }
    else {
      budgetReq = order.orderPartBudget;
      valueVisible = 'valueInvisible';
      specOrderPart = 'specOrderPart';
    }

    let digitalOption = '';
    if(order.medium === 'inter' && order.runOfId.indexOf('RO') > -1 ) {
      let idx = order.runOfId.indexOf('RO');
      digitalOption = '(' + order.runOfId.substr(idx,3) + ')';
    }

    for (var index in order.orderPartLengths) {
      if (spotLengths.length > 0) {
        spotLengths += '+';
      }

      spotLengths += order.orderPartLengths[index].spotLength;
    }

    let orderStatus = 'ingepland';
    let start = new Date(order.orderPartStartDate);
    let end = new Date(order.orderPartEndDate);
    let now = new Date();
    if(start <= now && end > now) {
      orderStatus = 'actief';
    }
    else if(end <= now) {
      orderStatus = 'afgelopen';
    }

    let orderPartDetails = '';
    //INTERNET DEELORDER
    if (order.medium === 'inter') {
      orderPartDetails = (
        <table className="blockTitleContent">
          <thead>
            <tr>
              <th>CPM prijs</th>
              <th>&#160;</th>
              <th>Budget</th>
              <th>Impressies</th>
              <th>Clicks</th>
              <th>CTR</th>
              <th>Complete</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="CPM">{numeral(order.cpmPrice).format('$ 0,000.00')}</td>
              <td className="deelOrderText">aangevraagd</td>
              <td className="grps">{numeral(order.orderPartBudget).format('$ 000,000,000')}</td>
              <td className="grps">{numeral(order.orderPartBudgetImpressions).format('000,000,000')}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td className="grps">&#160;</td>
              <td className="deelOrderText">Geleverd</td>
              <td className="grps">{numeral(order.orderPartBooked).format('$ 000,000,000')}</td>
              <td className="grps">{numeral(order.orderPartBookedImpressions).format('000,000,000')}</td>
              <td className="grps">{numeral(order.totalClicks).format('000,000,000')}</td>
              <td className="grps">{numeral(ctr).format('0.00')}%</td>
              <td className="grps">{numeral(complete).format('0.00')}%</td>
            </tr>
          </tbody>
        </table>);
    }
    else{
      //DLGRP DEELORDER
      if (order.spotTypeId === 'DLGRP') {
        orderPartDetails = (
          <table className="blockContent">
            <thead>
              <tr>
                 <th className={`${valueVisible}`}>&#160;</th>
                 <th className={`${valueVisible}`}>&#160;</th>
                 <th className={`${valueVisible} headerCenter`}>GRP's</th>
                 <th className={`${valueVisible} headerCenter`}>GRP's</th>
                 <th className="headerCenter">Budget</th>
                 <th className={`${valueVisible} headerCenter`}>Budget</th>
              </tr>
              <tr>
                <th className={`${valueVisible}`}>Doelgroep</th>
                <th className={`${valueVisible}`}>Grp prijs</th>
                <th className={`${valueVisible}`}>Aangevraagd</th>
                <th className={`${valueVisible}`}>Geboekt</th>
                <th>Aangevraagd</th>
                <th className={`${valueVisible}`}>Geboekt</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className={`${valueVisible} doelgroep`}>{order.targetGroupId}</td>
                <td className={`${valueVisible} grpPrijs`}>{numeral(order.grpPrice).format('$ 0,000')}</td>
                <td className={`${valueVisible} grps`}>{order.requestedGrpNo}</td>
                <td className={`${valueVisible} grps`}>{order.orderPartBookedGrpNo}</td>
                <td className="budget">{numeral(budgetReq).format('$ 0,000')}</td>
                <td className={`${valueVisible} budget`}>{numeral(budgetBooked).format('$ 0,000')}</td>
              </tr>
            </tbody>
          </table>);
      }
      else{
         //SPEC DEELORDER
        orderPartDetails = (
          <table className="blockContent">
            <thead>
              <tr>
                 <th width="100%">&#160;</th>
                 <th className="headerCenter">Budget</th>
              </tr>
              <tr>
                <th>&#160;</th>
                <th>Aangevraagd</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>&#160;</td>
                <td className="budget">{numeral(budgetReq).format('$ 0,000')}</td>
              </tr>
            </tbody>
          </table>);
      }
    }

//Uitzendschema link en indices pop-up
    let infoDiv = null;
    if(!this.state.hidden & order.targetGroupIndex > 0) {
      infoDiv = (<div className="indexes"
        onMouseEnter={this.handleEnter.bind(this)}
        onMouseLeave={this.handleLeave.bind(this)}>
        <table>
          <tbody>
            <tr>
              <th>Netto basis prijs</th>
              <td>{order.yearBaseRate}</td>
            </tr>
            <tr>
              <th>Maand index</th>
              <td>{order.monthIndex}</td>
            </tr>
            <tr>
              <th>Markt index</th>
              <td>{order.marketIndex}</td>
            </tr>
            <tr>
              <th>Inkoop optie index</th>
              <td>{order.productIndex}</td>
            </tr>
          </tbody>
        </table>
      </div>);
    }

    let uitzendSchemaDownload = null;
    if(order.medium !== 'inter' && showUitzendschemaLink) {
      uitzendSchemaDownload = (<div className="blockContent">
        <div className="info">
          <Link to={uitzendSchemaPath}>Toon het uitzendschema van deze deelorder</Link>
          { order.targetGroupIndex > 0 ? <span className="btn" onMouseEnter={this.handleEnter.bind(this)}
            onMouseLeave={this.handleLeave.bind(this)}
            dangerouslySetInnerHTML={{__html: window.icon_info}} /> : null}
          {infoDiv}
        </div>
      </div>);
    }

// Internet webpage pop-up
    let websiteDiv = null;
    if(!this.state.hidden) {
      websiteDiv = (<div className="indexes"
        onMouseEnter={this.handleEnter.bind(this)}
        onMouseLeave={this.handleLeave.bind(this)}>
        <table>
          <tbody>
          {order.orderPartWebsitePage.map((w) => {
            return (
              <tr>
                <th></th>
                <td>{w.websitePage}</td>
              </tr>);})}
          </tbody>
        </table>
      </div>);
    }
    if(order.medium === 'inter'  && order.orderPartWebsitePage.length > 0) {
      uitzendSchemaDownload = (<div className="blockContent">
        <div className="info">
          <span className="webpageBtn" onMouseEnter={this.handleEnter.bind(this)}
            onMouseLeave={this.handleLeave.bind(this)}
            dangerouslySetInnerHTML={{__html: window.icon_digital}} />
          {websiteDiv}
        </div>
      </div>);
    }

    return (
      <div className="orderPartDetails borderedBlock">
        <div className="blockTitleWrapper">
          <div className="blockTitleLeft">
            <h3>{order.packageDescr} {spotLengths}" {digitalOption}</h3>
            <p>
              <span className="periode">{orderPartStartDate} - {orderPartEndDate}</span>
              <span className={`${orderStatus} orderStatus`}>{orderStatus}</span>
            </p>
          </div>
          <div className={`${specOrderPart} blockTitleRight`}>
            {orderPartDetails}
          </div>
        </div>
        {uitzendSchemaDownload}
      </div>);
  }
}

export default OrderPart;