import * as React from 'react';
import * as i18next from 'i18next';
import {getFormattedPrice} from './../../utils/currency-helper';

interface IPaymentCompleteProps {
  order: any;
  paymentResult: any;
  locale: string;
  onReturn?: () => void;
}

class PaymentComplete extends React.Component<IPaymentCompleteProps> {
  static defaultProps = {
    onReturn: null,
  };

  render() {
    const {paymentResult, order, locale} = this.props;

    const transactionId = paymentResult.chargeId;
    const amount = getFormattedPrice({
      locale,
      price: order.description.amount,
      currency: order.description.currency
    });
    const customerEmail = 'your@email.com';
    const statusMessage = paymentResult.isPending ? 'paymentComplete.transaction.pending' : 'paymentComplete.transaction.success';

    return (
      <div
        data-hook="wcn-payment-complete"
        style={{ textAlign: 'center'}}
      >
        <h2 data-hook="wcn-payment-complete-label">{i18next.t('paymentComplete.label')}</h2>
        <div data-hook="wcn-transaction-info">
          <span
            dangerouslySetInnerHTML={{ __html: i18next.t(statusMessage, {amount, customerEmail}) }}
          />
          <br/>
          {i18next.t('paymentComplete.transaction.id', {transactionId})}<br/><br/>
        </div>
        {this.props.onReturn ?
          <button
            data-hook="wcn-return-button"
            onClick={this.props.onReturn}
            >
            {i18next.t('paymentComplete.returnButton.label')}
          </button>
        : null}
      </div>
    );
  }
}

export default PaymentComplete;