import { Component } from 'preact';

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

import { LongPress } from '../long-press/long-press';

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


export default class PopupGamePlay extends Component<any, any> {
  render() {
    const {
      stageList = [],
      onClickRule = () => ({}),
      onClickConfirm = () => ({}),
      onReleasePressReward = () => ({}),
      onLongPressReward = () => ({}),
      onClickReward = () => ({}),
    } = this.props;

    return (
      <div className={styles['popup-game-play']}>
        <div className={styles['popup-title']}>
          <div className={styles['popup-text']}/>
        </div>
        <div className={styles['stage-list']}>
          {stageList.map((value, index) => (
            <div
              key={index}
              className={styles['stage-item']}
            >
              <div className={styles['stage-des']}>
                <div className={styles['stage-diamond']}/>
                <div className={styles['stage-rank']}>
                  {value.rankInterval}
                </div>
              </div>
              <div className={styles['stage-card']}>
                <CdnImage
                  className={styles['stage-logo']}
                  src={value.stageLogo}
                />
                <div className={styles['stage-name']}>
                  {/* {value.stageName} */}
                </div>
                <div className={styles['stage-time']}>
                  {value.stageTime}
                </div>
                <div className={styles['stage-award']}>
                  <text className={styles['stage-award-text']}>
                    {value.stageAwardName}
                  </text>
                  <div className={styles['stage-award-group']}>
                    {value.stageAwardImg?.map((item, awardIndex) => (
                      <LongPress
                        key={awardIndex}
                        customClass={styles['stage-award-img-box']}
                        onRelease={onReleasePressReward}
                        onLongPress={e => onLongPressReward(e, item, value?.stageAwardInfo?.[awardIndex])}
                        onClick={(e) => {
                          onClickReward(e, item, value?.stageAwardInfo?.[awardIndex]);
                        }}
                      >
                        <CdnImage
                          className={styles['stage-award-img']}
                          src={item}
                        />
                      </LongPress>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className={styles['popup-btn-group']}>
          <div
            className={styles['popup-btn-cancel']}
            onClick={onClickRule}
          >
            <text className={styles['btn-text']}>
              详细规则
            </text>
          </div>
          <div
            className={styles['popup-btn-confirm']}
            onClick={onClickConfirm}
          >
            <text className={styles['btn-text']}>
              知道了
            </text>
          </div>
        </div>
      </div>
    );
  }
}