import ContactPerson from './contactPerson.jsx';
import ContractSpot from './contractSpot.jsx';
import ContractTG from './contractTG.jsx';
import moment from 'moment';
import numeral from 'numeral';
import ProgressBar from './progressBar.jsx';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { contractDetails } from '../actions/contractActions';
import { getToken } from '../utils/helpers.jsx';
import { Link } from 'react-router';
import { PORTAL_API_PATH } from '../constants/appConstants';

class Contract extends Component {
  /**
   *
   */
  componentWillMount() {
    let { dispatch } = this.props;
    let { medium, contractId } = this.props.params;

    dispatch(contractDetails(medium, contractId));
  }

  /** */
  render() {
    let { contractDetails, dispatch } = this.props;
    if(!contractDetails || contractDetails.count() === 0) {
      return (<div>Geen contract gevonden.</div>);
    }

    let contract = contractDetails.get('data');

    let { medium } = this.props.params;
    let contractTG = contract.contractTGs;
    let contractSpot = contract.contractSpots;
    let contractStartDate = moment(contract.startDate).format('D MMMM YYYY');
    let contractEndDate = moment(contract.endDate).format('D MMMM YYYY');

    let contractTGheading = null;
    if (contractTG.length > 0) {
      contractTGheading = (<h3>Vaste kosten per GRP</h3>);
    }

    let contractSpotTable = null;
    if (contractSpot.length > 0) {
      contractSpotTable = (<h3>Vaste kosten per spot</h3>);
    }

    let contractURL = null;
    if(contract.documentSeqNr > 0) {
      contractURL = (<div className="downloadBtn">
        <a target="_blank"
           href={`${PORTAL_API_PATH}/contract/${contract.contractId}/${contract.documentSeqNr}.pdf`}>
          Download als PDF
        </a>
      </div>);
    }
    let conditionsURL = (<div className="linkURL">
        <a target="_blank" href='https://www.ster.nl/media/1853/ster_algemene_voorwaarden_2016.pdf'>
          Algemene voorwaarden
          <span className="iconWrapper" dangerouslySetInnerHTML={{__html: window.pijlBlauw}} />
        </a>
      </div>);
    let optionsURL = (<div className="linkURL">
        <a target="_blank" href='https://www.ster.nl/inkooptools'>
          Inkoopopties
          <span className="iconWrapper" dangerouslySetInnerHTML={{__html: window.pijlBlauw}} />
        </a>
      </div>);

    return (<div className="contractData">
      <div className="portalMainForm">
        <div className="screenTitle">{contract.advName}{contract.concernName}</div>
      </div>
      <div className="medium-8 columns contractFormLeft">
        <div className="contractDetails">
          <table>
            <tbody>
              <tr>
                <th>Contractperiode</th>
                <td>{contractStartDate} - {contractEndDate}</td>
              </tr>
              <tr>
                <th>Budget</th>
                <td>{numeral(contract.budget).format('$ 0,000')}</td>
              </tr>
              <tr>
                <th>Bestedingsaandeel</th>
                <td>{contract.marketSharePerc}%</td>
              </tr>
              <tr>
                <th>Voorkeursposities</th>
                <td>{contract.placementOptimalizationPerc}%   {contract.placementOption}</td>
              </tr>
            </tbody>
          </table>
        </div>
        {contractTGheading}
        {contractTG.map((c) => (<ContractTG key={c.targetGroupId + c.channel + c.inkoopcode} {...c} medium={medium}/>))}
        {contractSpotTable}
        {contractSpot.map((s) => (<ContractSpot key={s.channel} {...s} />))}
      </div>
      <div className="medium-4 columns contractFormRight">
        {contractURL}
        <div className="budgetBlock">
          <ProgressBar budget={contract.budget} booked={contract.bookedTotal} />
          {conditionsURL}
          {optionsURL}
          <div className="accManager">
            <ContactPerson email={contract.accManagerEmail} name={contract.accManagerName} />
          </div>
        </div>
      </div>
    </div>);
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    contractDetails: state.contract
  };
};

export default connect(mapStateToProps)(Contract);