import { h, Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';

import PopupGetAwardShell from '../popup-get-award-shell/popup-get-award-shell';

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

interface PopupGetAwardV2Props {
  awardList?: Array<{
    awardImg?: string;
    awardName?: string;
    each?: number;
  }>;
  tips?: string;
  title?: string;
  onClickClose?: () => void;
}

export default class PopupGetAwardV2 extends Component<PopupGetAwardV2Props, {}> {
  render() {
    const { awardList = [], tips = '', title = '', onClickClose = (() => {}) } = this.props;

    return (
      <PopupGetAwardShell
        renderButton={() => (
          <div
            className={styles['btn-continue']}
            onClick={onClickClose}
          >
            点击继续
          </div>
        )}
      >
        <div className={styles['popup-award-box']}>
          {title && (
          <text className={styles['popup-award-title']}>
            {title}
          </text>
          )}
          <div className={styles['popup-award-list-box']}>
            <div className={styles['popup-award-list']}>
              {awardList.map((item, index) => (
                <div
                  key={index}
                  className={styles['popup-award-item']}
                >
                  <div className={styles['popup-award']}>
                    <CdnImage
                      className={styles['popup-award-img']}
                      src={item.awardImg || ''}
                    />
                    <text className={styles['popup-award-num']}>{item.each}</text>
                  </div>
                  <text className={styles['popup-award-name']}>
                    {item.awardName}
                  </text>
                </div>
              ))}
            </div>
          </div>
          {tips && (
            <text className={styles['popup-award-tips']}>
              {tips}
            </text>
          )}
        </div>
      </PopupGetAwardShell>
    );
  }
}