import { h, Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';
import Empty from '../empty/empty';
import PopupContainer from '../popup-container/popup-container';

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

export default class PopupRankIntegral extends Component<any, any> {
  render() {
    const { emptyText, metricsList, untilPublish, promotionList, onClickClose, promotionMine, onClickShowRankTips,
      isPromotionEnd,
    } = this.props;
    function  filterData(arr, metricsItem) {
      const obj = arr.find(item => item.id === metricsItem.id);
      const value = metricsItem.units ? (Math.round((obj?.value || 0) / 60) + metricsItem.units) : (obj?.value || 0);
      return value || 0;
    }
    return (
      <PopupContainer
        title='榜单'
        size='big'
        onClickClose={onClickClose}
      >
        <div
          className={styles['rank-tips-icon']}
          onClick={onClickShowRankTips}
        >
        </div>
        {/* 排名显示128名玩家 */}
        <div className={styles['bd-title']}>
          {/* 只显示排名前128的玩家 */}
        </div>
        {/* 标题 */}
        <div className={styles['rank-list-title']}>
          <div className={`${styles['rank-col-item']} ${styles['rank-title-item']}`}>排名</div>
          <div className={`${styles['rank-col-item']} ${styles['rank-title-item']}`}>玩家昵称</div>
          {metricsList.map((item: any, index) => (
            <div
              key={`${index}-1`}
              className={`${styles['rank-col-item']} ${styles['rank-title-item']}`}
            >{item.name}
            </div>
          ))}
        </div>
        {untilPublish && promotionList?.length > 0
          ? (
            <div className={styles['rank-list']}>
              {promotionList.map((value, index) => (
                <div
                  key={index}
                  className={`${styles['rank-item']} ${styles[`rank-item${value.rank}`]}`}
                >
                  <div className={styles['rank-col-item']}>
                    <div className={styles['rank-num-box']}></div>
                    {
                      value.rank <= 3 ? (
                        <CdnImage
                          className={styles['rank-num-img']}
                          src={`https://image-1251917893.file.myqcloud.com/Esports/pix/img/icon-rank${value.rank}.png`}
                        />
                      ) : <div className={styles['rank-num']}> {value.rank} </div>
                    }
                  </div>
                  <div className={`${styles['rank-col-item']} ${styles['rank-name-box']}`}>
                    <div className={styles['rank-avatar']}>
                      <CdnImage
                        className={styles['rank-avatar-img']}
                        src={value.pic}
                      />
                      <div className={styles['rank-border']}/>
                    </div>
                    <text className={styles['rank-name']}>
                      {value.name}
                    </text>
                  </div>
                  {metricsList.map((metricsItem: any, index) => (
                    <div
                      key={`${index}-0`}
                      className={`${styles['rank-col-item']} ${styles['rank-integral']}`}
                    >
                      {filterData(value.metrics, metricsItem)}
                    </div>
                  ))}
                  {/* <div className={`${styles['rank-col-item']} ${styles['rank-integral']}`}>*/}
                  {/*  {value.integral || 0}*/}
                  {/* </div>*/}
                  {/* <div className={`${styles['rank-col-item']} ${styles['rank-time']}`}>*/}
                  {/*    { value.time || 0 }min*/}
                  {/* </div>*/}
                  {/* <div className={`${styles['rank-col-item']} ${styles['rank-kill']}`}>*/}
                  {/*    { value.kill || 0 }*/}
                  {/* </div>*/}
                  {/* <div className={`${styles['rank-col-item']} ${styles['rank-score']}`}>*/}
                  {/*    { value.score || 0 }*/}
                  {/* </div>*/}
                </div>
              ))}
            </div>
          )
          : (
            <div className={styles['empty-box']}>
              <Empty text={emptyText}/>
            </div>
          )}
        {promotionMine?.name && (
        <div className={`${styles['my-rank-item']} ${styles[`rank-item${promotionMine.rank}`]}`}>
          <div className={styles['rank-col-item']} >
            <div className={styles['rank-num-box']}></div>
            {
              promotionMine.rank <= 3 ? (
                <CdnImage
                  className={styles['rank-num-img']}
                  src={`https://image-1251917893.file.myqcloud.com/Esports/pix/img/icon-rank${promotionMine.rank}.png`}
                />
              ) : <div className={styles['rank-num']}> {promotionMine.rank} </div>
            }
          </div>
          <div className={`${styles['rank-col-item']} ${styles['rank-name-box']}`}>
            <div className={styles['rank-avatar']}>
              <CdnImage
                className={styles['rank-avatar-img']}
                src={promotionMine.pic}
              />
              <div className={styles['rank-border']}/>
            </div>
            <div className={styles['rank-name-content']}>
              <text className={styles['rank-name']}>
                {promotionMine.name}
              </text>
              {isPromotionEnd && (
              <div
                className={`${styles.promote} ${promotionMine.promotion ? styles['promote-success'] : styles['promote-fail']}`}
              />
              )}
            </div>
          </div>
          {metricsList.map((metricsItem: any, index) => (
            <div
              key={index}
              className={`${styles['rank-col-item']} ${styles['rank-integral']}`}
            >
              {filterData(promotionMine.metrics, metricsItem)}
            </div>
          ))}
          {/*  <div className={`${styles['rank-col-item']} ${styles['rank-integral']}`}>*/}
          {/*      {promotionMine.integral || 0}*/}
          {/*  </div>*/}
          {/* <div className={`${styles['rank-col-item']} ${styles['rank-time']}`}>*/}
          {/*  { promotionMine.time || 0 }min*/}
          {/* </div>*/}
          {/* <div className={`${styles['rank-col-item']} ${styles['rank-kill']}`}>*/}
          {/*  { promotionMine.kill || 0 }*/}
          {/* </div>*/}
          {/* <div className={`${styles['rank-col-item']} ${styles['rank-score']}`}>*/}
          {/*  { promotionMine.score || 0 }*/}
          {/* </div>*/}
        </div>
        )}
      </PopupContainer>
    );
  }
}