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

class SpotTableRow extends Component {
  /**
  * Constructor
  */
  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 { orderId, spot } = this.props;
    let spotDate = moment(spot.schedDate).format('dd D MMM YYYY');
    let spotTime = moment(spot.schedStartTime).format('HH:mm');

    let channel = null;
    if(spot.breakId.indexOf('TVJ') > -1) {
      channel = 'televisie-zapp';
    }
    else if(spot.breakId.indexOf('TV') > -1) {
      channel = `televisie${spot.breakId.substring(2, 3)}`;
    }
    else if(spot.breakId.indexOf('R') > -1) {
      channel = `radio${spot.breakId.substring(1, 2)}`;
    }

    let grossSpotPrice = numeral(spot.grossSpotPrice).format('$ 0,000.00');
    let nettSpotPrice = numeral(spot.nettSpotPrice).format('$ 0,000.00');

    let infoDiv = null;
    if(!this.state.hidden) {
      infoDiv = (<div className="spotInfo"
        onMouseEnter={this.handleEnter.bind(this)}
        onMouseLeave={this.handleLeave.bind(this)}>
        <table>
          <tbody>
            <tr>
              <th>Commercial</th>
              <td>{spot.commercialCode.trim() ? spot.commercialCode + ': ' + spot.commercialDescr : ''}</td>
            </tr>
            <tr>
              <th>Inkoop optie</th>
              <td>{spot.packageDescr}</td>
            </tr>
            <tr>
              <th>Positie</th>
              <td>{spot.preferredPosition}</td>
            </tr>
            <tr>
              <th>Bonus</th>
              <td>{spot.bonusAmount}</td>
            </tr>
          </tbody>
        </table>
      </div>);
    }

    return (
      <div className="spotDetails borderedBlock">
        <div className="main">
          <div className="spotDate">{spotDate}</div>
          <div className="spotBlok">{spotTime}</div>
          <div className="spotTime">{spot.breakId}</div>
        </div>
        <div className="channel">
          <img src={`/Images/logos/small/${channel}.png`} width="100" alt={`Break ID: ${spot.breakId}`} />
        </div>
        <div className="show">
          <div className="before">
            <div className="labelTxt">Programma voor/na:</div>
            <div className="valueTxt">{spot.programmeBefore}</div>
            <div className="valueTxt">{spot.programmeAfter}</div>
          </div>
        </div>
        <div className="price">
          <div className="bruto">
            <span className="labelTxt">Bruto spotprijs: </span>
            <span className="valueTxt">{grossSpotPrice}</span>
          </div>
          <div className="netto">
            <span className="labelTxt">Netto spotprijs: </span>
            <span className="valueTxt">{numeral(spot.nettSpotPrice).format('$ 0,000.00')}</span>
          </div>
        </div>
        <div className="spotLength">
          <div className="spotBlok">{spot.spotLength}"</div>
        </div>
        <div className="info">
          <span className="btn" onMouseEnter={this.handleEnter.bind(this)}
            onMouseLeave={this.handleLeave.bind(this)}
            dangerouslySetInnerHTML={{__html: window.icon_info}} />
          {infoDiv}
        </div>
      </div>);
  }
}

export default SpotTableRow;