import React, { Component } from 'react';
import { Link } from 'react-router';
import moment from 'moment';
import numeral from 'numeral';
import { PORTAL_API_PATH } from '../constants/appConstants';

class Invoice extends Component {
  /** */
  render() {
    let {
      invoiceId,
      internalInvoiceId,
      advertiserName,
      productDescr,
      invoiceDate,
      dueDate,
      invoiceStatus,
      invoiceAmount,
      vatAmount
    } = this.props;

    let invoiceDateFormatted = moment(invoiceDate).format('D MMMM YYYY');
    let dueDateFormatted = moment(dueDate).format('D MMMM YYYY');

    let due = new Date(dueDate);
    let now = new Date();
    let invoiceDueDate = 'afgelopen';
    if(invoiceStatus.toLowerCase().trim() !== 'betaald') {
      invoiceDueDate = 'betaalbaar';
    }
    let status = invoiceStatus.toLowerCase().trim();

    return (
      <div className="invoiceDetails borderedBlock">
        <div className="main">
          <div className="advertiser">{advertiserName}</div>
          <div className="product">{productDescr}</div>
          <div className="invoiceId">{invoiceId}</div>
        </div>
        <div className="invoiceDate">
          <div>
            <span className="labelTxt">Factuurdatum: </span>
            <span className="valueTxt">{invoiceDateFormatted}</span>
          </div>
          <div className={`${invoiceDueDate}`}>
            <span className="labelTxt">Vervaldatum: </span>
            <span className="valueTxt">{dueDateFormatted}</span>
          </div>
          <div className={`${status}`}>{invoiceStatus}</div>
        </div>
          <div className="invoiceAmounts">
            <table>
              <tbody>
                <tr>
                  <th className="amountTxt">Excl. BTW:</th>
                  <td className="amountValue">{numeral(invoiceAmount - vatAmount).format('$ 0,000.00')}</td>
                </tr>
                <tr>
                  <th className="amountTxt">BTW:</th>
                  <td className="amountValue">{numeral(vatAmount).format('$ 0,000.00')}</td>
                </tr>
                <tr className="totalAmount">
                  <th className="amountTxt">Totaalbedrag:</th>
                  <td className="amountValue">{numeral(invoiceAmount).format('$ 0,000.00')}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className="downloadBtn">
            <a target="_blank"
               href={`${PORTAL_API_PATH}/invoice/${internalInvoiceId}.pdf`}>
              Download als PDF
            </a>
          </div>
        </div>);
  }
}

export default Invoice;