import React from 'react';
import PropTypes from 'prop-types';
import APIcon from '../../../common/APIcon';
import APLabelWithText from '../../../common/APLabelWithText';
import './DepositTHBPaymentDetails.css';
import { getBEMClasses } from '../../../../helpers/cssClassesHelper';
import { formatNumberToLocale } from '../../../../helpers/numberFormatter';
import { Text } from 'design/typography';
import colors from 'design/colors';
import Panel from 'components/ZmPanel/Panel';

const baseClasses = getBEMClasses('deposit-thb-payment-details');

const QRDetails = ({ qrUrl = 111, ticketNumber, amount }, context) => {
  return (
    <React.Fragment>
      <div className={baseClasses('qr-container')}>
        <Panel color={colors.bg_warning} margin="0 0 30px 0">
          <Text margin={'0 0 10px 0'}>
            {context.t(
              'We only accept deposits from your registered bank account (see above).'
            )}
          </Text>
          <Text>
            {context.t(
              'This is a one-time use QR code, please do not re-use it.'
            )}
          </Text>
        </Panel>
        <img src={qrUrl} alt="QR code" className={baseClasses('qr-image')} />
        <a
          target="_blank"
          rel="noopener noreferrer"
          className={baseClasses('qr-download')}
          download
          href={qrUrl}
        >
          <APIcon name="download2" customClass={baseClasses()} />

          {context.t('Download')}
        </a>
      </div>
      <div className={baseClasses('bank-info')}>
        <APLabelWithText
          label={context.t('Amount')}
          text={`${formatNumberToLocale(amount, 'THB')} THB`}
          customClass={baseClasses()}
        />
      </div>
    </React.Fragment>
  );
};
QRDetails.propTypes = {
  qrUrl: PropTypes.string,
  ticketNumber: PropTypes.number,
  amount: PropTypes.number,
};

QRDetails.contextTypes = {
  t: PropTypes.func.isRequired,
};

export default QRDetails;
