text: import React from 'react'
  import PropTypes from 'prop-types'
  
  import QRCode from 'qrcode.react'
  import copy from 'copy-to-clipboard'
  import { showNotification } from 'lib/utils/notifications'
  
  import FaAngleDown from 'react-icons/lib/fa/angle-down'
  
  import Value from 'components/Value'
  import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl'
  import Countdown from '../Countdown'
  
  import messages from './messages'
  
  import styles from './InvoiceModal.scss'
  
  const InvoiceModal = ({
    item: invoice,
    ticker,
    currentTicker,
  
    toggleCurrencyProps: {
      setActivityModalCurrencyFilters,
      showCurrencyFilters,
      currencyName,
      currentCurrencyFilters,
      onCurrencyFilterClick
    }
  }) => {
    const copyPaymentRequest = () => {
      copy(invoice.payment_request)
      showNotification('Noice', <FormattedMessage {...messages.copied} />)
    }
  
    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>
              <FormattedMessage {...messages.pay_req} />
            </h2>
            <QRCode
              value={invoice.payment_request}
              renderAs="svg"
              size={150}
              bgColor="white"
              fgColor="#252832"
              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.finalAmount}
                    currency={ticker.currency}
                    currentTicker={currentTicker}
                    fiatTicker={ticker.fiatTicker}
                  />
                </h1>
                <section
                  className={styles.currentCurrency}
                  onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}
                >
                  <span>{currencyName}</span>
                  <span>
                    <FaAngleDown />
                  </span>
                </section>
                <ul className={showCurrencyFilters ? styles.active : undefined}>
                  {currentCurrencyFilters.map(filter => (
                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                      {filter.name}
                    </li>
                  ))}
                </ul>
              </section>
              <section className={styles.date}>
                <p>
                  <FormattedDate
                    value={invoice.creation_date * 1000}
                    year="numeric"
                    month="long"
                    day="2-digit"
                  />{' '}
                  <FormattedTime value={new Date(invoice.creation_date * 1000)} />
                </p>
                {!invoice.settled && (
                  <p className={styles.notPaid}>
                    <FormattedMessage {...messages.not_paid} />
                  </p>
                )}
                {invoice.settled && (
                  <p className={styles.paid}>
                    <FormattedMessage {...messages.paid} />
                  </p>
                )}
              </section>
            </div>
  
            <div className={styles.memo}>
              <h4>
                <FormattedMessage {...messages.memo} />
              </h4>
              <p>{invoice.memo}</p>
            </div>
  
            <div className={styles.request}>
              <h4>
                <FormattedMessage {...messages.request} />
              </h4>
              <p>{invoice.payment_request}</p>
            </div>
          </section>
        </div>
  
        <div className={styles.actions}>
          <div>
            <FormattedMessage {...messages.save} />
          </div>
          <div onClick={copyPaymentRequest}>
            <FormattedMessage {...messages.copy} />
          </div>
        </div>
      </div>
    )
  }
  
  InvoiceModal.propTypes = {
    item: PropTypes.object.isRequired,
    ticker: PropTypes.object.isRequired,
    currentTicker: PropTypes.object.isRequired,
    toggleCurrencyProps: PropTypes.object.isRequired
  }
  
  export default InvoiceModal
  