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

class ContractTG extends Component {
  /** */
  render() {
    let {
      targetGroupId,
      channel,
      inkoopcode,
      basicPrice,
      tgBudget,
      tgStartDate,
      tgEndDate,
      medium
    } = this.props;

    let formattedStartDate = moment(tgStartDate).format('D MMMM YYYY');
    let formattedEndDate = moment(tgEndDate).format('D MMMM YYYY');
    let channelVisible = 'valueVisible';
    if (channel.trim() === '') {
      channelVisible = 'valueInvisible';
    }

    let tgDetails = '';
    if (medium === 'inter') {
      tgDetails = (
        <table className="blockContent">
          <thead>
          <tr>
            <th className={`${channelVisible}`}>Inkoop optie</th>
            <th>Basisprijs</th>
            <th>Budget</th>
            <th>Periode</th>
          </tr>
        </thead>
          <tbody>
            <tr>
              <td className="channel">{inkoopcode}</td>
              <td className="basicPrice">{numeral(basicPrice).format('$ 000.00')}</td>
              <td className="budget">{numeral(tgBudget).format('$ 0,000')}</td>
              <td className="periode">{formattedStartDate} - {formattedEndDate}</td>
          </tr>
          </tbody>
        </table>);
    }
    else{
      tgDetails = (
        <table className="blockContent">
          <thead>
          <tr>
            <th>Doelgroep</th>
            <th className={`${channelVisible}`}>Zender</th>
            <th>Basisprijs</th>
            <th>Budget</th>
            <th>Periode</th>
          </tr>
        </thead>
          <tbody>
            <tr>
              <td className="targetGroupId">{targetGroupId}</td>
              <td className={`${channelVisible} channel`}>{channel}</td>
              <td className="basicPrice">{numeral(basicPrice).format('$ 0,000')}</td>
              <td className="budget">{numeral(tgBudget).format('$ 0,000')}</td>
              <td className="periode">{formattedStartDate} - {formattedEndDate}</td>
          </tr>
          </tbody>
        </table>);
    }

    return (
      <div className="contractItem borderedBlock">
        {tgDetails}
      </div>
      );
  }
}

export default ContractTG;