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

class ContractSpot extends Component {
  /** */
  render() {
    let {
      channel,
      discountPerc,
      spotStartDate,
      spotEndDate
    } = this.props;

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

    return (
      <div className="contractItem borderedBlock">
        <table className="blockContent">
          <thead>
          <tr>
            <th className={`${channelVisible}`}>Zender</th>
            <th>Korting</th>
            <th>Periode</th>
          </tr>
        </thead>
          <tbody>
            <tr>
              <td className={`${channelVisible} channel`}>{channel}</td>
              <td className="korting">{numeral(discountPerc).format('0.00')} %</td>
              <td className="periode">{formattedStartDate} - {formattedEndDate}</td>
          </tr>
          </tbody>
        </table>
      </div>
      );
  }
}

export default ContractSpot;