import './paymentCompleted.scss';

import React from 'react';

import Button from '../../components/Button';
import ImageIcon from '../../components/ImageIcon';
import Modal from '../../components/Modal/modal';
import { getCurrentTimeJpStr } from '../../utils/dateHelper';
import i18n from '../../i18n';

type PaymentStatus =
  | 'completed'
  | 'completed_cb'
  | 'failed'
  | 'unpaid'
  | 'unpaid_cb';

interface Props {
  visible: boolean;
  status?: PaymentStatus;
}

const paymentCompleted: React.FC<Props> = (props) => {
  const { visible } = props;

  return (
    <Modal visible={visible}>
      <div className="paymentCompleted">
        <div className="paymentCompleted-main">
          <ImageIcon src="paypayfleamarket" className="avatar" />
          <div className="app-name">{i18n.t('payment.appName')}</div>
          <div className="balance">
            2,100<span>円</span>
          </div>
          <div className="done-text completed">
            {i18n.t('payment.completion')}
          </div>
          <div className="paytime-due">{i18n.t('payment.deadline')}</div>
          <div className="paytime-text">{getCurrentTimeJpStr()}</div>
        </div>

        <div className="paymentCompleted-divider" />

        <div className="paymentCompleted-points">
          <ImageIcon className="points-img" src="imgPoint" />
          <div className="points-content">
            <div className="points-point">
              <div className="point-text">{i18n.t('payment.balance')}</div>
              <div className="point-money">
                98<span className="parity">{i18n.t('payment.yen')}</span>
              </div>
            </div>

            <div className="point-label">{i18n.t('payment.cashless')}</div>

            <div className="points-detail-text">
              {i18n.t('payment.breakdown')}
            </div>
          </div>
        </div>

        <div className="paymentCompleted-divider" />

        <div className="paymentCompleted-transaction">
          <div>{i18n.t('payment.number')}</div>
          <div className="trans-num">
            {' '}
            012345678901236789
            <ImageIcon className="trans-copy" src="iconMiniappCopy" />
          </div>
        </div>

        <div className="paymentCompleted-btn-container">
          <Button className="btn-block" btnType="primary">
            {i18n.t('button.close')}
          </Button>
        </div>
      </div>
    </Modal>
  );
};

paymentCompleted.defaultProps = {
  status: 'unpaid',
};

export default paymentCompleted;