text: import React from 'react'
  import PropTypes from 'prop-types'
  
  import Moment from 'react-moment'
  import 'moment-timezone'
  
  import QRCode from 'qrcode.react'
  import copy from 'copy-to-clipboard'
  import { showNotification } from 'notifications'
  
  import { FaAngleDown } from 'react-icons/lib/fa'
  
  import Value from 'components/Value'
  import Countdown from './Countdown'
  
  import styles from './InvoiceModal.scss'
  
  const InvoiceModal = ({
    invoice,
    ticker,
    currentTicker,
  
    toggleCurrencyProps: {
      setActivityModalCurrencyFilters,
      showCurrencyFilters,
      currencyName,
      currentCurrencyFilters,
      onCurrencyFilterClick
    }
  }) => {
    const copyPaymentRequest = () => {
      copy(invoice.payment_request)
      showNotification('Noice', 'Successfully copied to clipboard')
    }
  
    const countDownDate = (parseInt(invoice.creation_date, 10) + parseInt(invoice.expiry, 10))
  
    return (
      <div className={styles.container}>
        <div className={styles.content}>
          <section className={styles.left}>
            <h2>Payment Request</h2>
            <QRCode
              value={invoice.payment_request}
              renderAs='svg'
              size={150}
              bgColor='transparent'
              fgColor='white'
              level='L'
              className={styles.qrcode}
            />
            <Countdown countDownDate={countDownDate} />
          </section>
          <section className={styles.right}>
            <div className={styles.details}>
              <section className={styles.amount}>
                <h1>
                  <Value value={invoice.value} currency={ticker.currency} currentTicker={currentTicker} />
                </h1>
                <section className={styles.currentCurrency} onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}>
                  <span>{currencyName}</span><span><FaAngleDown /></span>
                </section>
                <ul className={showCurrencyFilters && styles.active}>
                  {
                    currentCurrencyFilters.map(filter =>
                      <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>)
                  }
                </ul>
              </section>
              <section className={styles.date}>
                <p>
                  <Moment format='MM/DD/YYYY'>{invoice.creation_date * 1000}</Moment>
                </p>
                <p className={styles.notPaid}>
                  {!invoice.settled && 'Not Paid'}
                </p>
              </section>
            </div>
  
            <div className={styles.memo}>
              <h4>Memo</h4>
              <p>{invoice.memo}</p>
            </div>
  
            <div className={styles.request}>
              <h4>Request</h4>
              <p>{invoice.payment_request}</p>
            </div>
          </section>
        </div>
  
        <div className={styles.actions}>
          <div>Save as image</div>
          <div onClick={copyPaymentRequest}>Copy Request</div>
        </div>
      </div>
    )
  }
  
  InvoiceModal.propTypes = {
    invoice: PropTypes.object.isRequired,
    ticker: PropTypes.object.isRequired,
    currentTicker: PropTypes.object.isRequired,
    toggleCurrencyProps: PropTypes.object.isRequired
  }
  
  export default InvoiceModal
  