import { Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';
import PopupContainer from '../popup-container/popup-container';
import QrCode from '../qr-code/qr-code';

import * as styles from './css/index.less';

interface ActGoodsDetailQRCodeProps {
  onClickClose: () => void;
  main?: string; // 图片链接
  title?: string;
  recvway?: string;
  code?: string; // 要转为二维码的地址，code 和 main 只会展示一个
}

export default class ActGoodsDetailQRCode extends Component<ActGoodsDetailQRCodeProps, any> {
  render() {
    const { onClickClose, main, code, title = '扫码关联微信号', recvway = '截图保存使用微信 · 扫一扫' } = this.props;

    return (
      <PopupContainer
        title={title}
        size='small'
        onClickClose={onClickClose}
      >
        <div className={styles['qrcode-wrapper']}>
          {/* 二维码容器 */}
          <div className={styles['qrcode-container']}>
            {main ? (
              <CdnImage
                src={main}
                alt="二维码"
                className={styles['qrcode-image']}
              />
            ) : code && (
            <QrCode
              value={code}
              size="160"
            />
            )}
          </div>

          {/* 文字描述 */}
          <text className={styles['qrcode-recvway']}>
            {recvway}
          </text>
        </div>
      </PopupContainer>
    );
  }
}