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 PopupGetAwardPhysicalProps {
  awardList?: Array<{
    awardImg?: string;
    awardName?: string;
    each?: number;
    money?: string;
  }>;
  title?: string;
  btnText?: string;
  textOne?: string;
  textTwo?: string;
  showBtn?: boolean;
  onClickClose?: () => void;
  onClickOperation?: () => void;
}

export default class PopupGetAwardPhysical extends Component<PopupGetAwardPhysicalProps, {}> {
  render() {
    const {
      awardList = [],
      onClickClose = (() => {}),
      onClickOperation = (() => {}),
      textOne = '',
      textTwo = '',
      title = '',
      btnText = '',
    } = this.props;

    return (
      <PopupGetAwardShell
        renderButton={() => (
          btnText ? (
            <div
              className={styles['btn-operation']}
              onClick={onClickOperation}
            >
              {btnText}
            </div>
          ) : (
            <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 || ''}
                    />
                    {item.each && <text className={styles['popup-award-num']}>{item.each}</text>}
                    {item.money && (
                      <div className={styles['popup-award-money']}>
                        <text className={styles['popup-award-money-text']}>{item.money}</text>
                      </div>
                    )}
                  </div>
                  <text className={styles['popup-award-name']}>
                    {item.awardName}
                  </text>
                </div>
              ))}
            </div>
          </div>
          <div className={styles['popup-award-tips']}>
            {textOne && (
              <text className={styles['popup-award-tips-text']}>
                {textOne}
              </text>
            )}
            {textTwo && (
              <text className={styles['popup-award-tips-text']}>
                {textTwo}
              </text>
            )}
          </div>
        </div>
      </PopupGetAwardShell>
    );
  }
}