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

class Spot extends Component {
  /** */
  render() {
    let {
      baseBreakPrice,
      commercialCode,
      commercialDescr,
      grossSpotPrice,
      grpPrice,
      nettSpotPrice,
      orderId,
      orderPartId,
      preferredPosition,
      productDescr,
      productId,
      spotId,
      spotLength,
      packageDescr,
      advertiserName,
      mediumId,
      schedStartTime,
    } = this.props;

    let startDate = moment(schedStartTime).format('d MMMM YYYY');
    let startTime = moment(schedStartTime).format('H:mm');

    let positie = preferredPosition ? (<div className="spot-details">Positie: {preferredPosition}</div>) : null;

    return (
      <div className="spot">
        <div className="spot-item">
          <h4 className="productTitle">
            <Link to={`/campaigns/${mediumId}/${orderId}`}>{advertiserName}</Link>
          </h4>
          <div className="spot-details productDescr">
            <Link to={`/campaigns/${mediumId}/${orderId}`}>{productDescr}</Link>
          </div>
          <div className="spot-details packageDescr">{packageDescr} {spotLength}"</div>
          <div className="spot-details timeAndLink">
            <div className="spotTimeWrapper">
              <div className="spotTime">{startTime}</div>
            </div>
            <div className="orderLink">
              <ShowDetailsLink link={`/campaigns/${mediumId}/${orderId}`} />
            </div>
          </div>
        </div>
      </div>
      );
  }
}

export default Spot;