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';

interface RankItem {
  rank: number;
  avatar: string;
  name: string;
  score: string | number;
  university?: string;
}

interface Props {
  rankList?: RankItem[];
  myRank?: RankItem;
  emptyText?: string;
  onClickClose?: () => void;
  titleTips?: string;
  title?: string;
}

export default class PopupRank extends Component<Props, any> {
  render() {
    const {
      rankList,
      myRank,
      emptyText = '暂无榜单',
      title = '榜单',
      onClickClose,
      titleTips = '',
    } = this.props;
    // const rankList = [
    //   {
    //     rank: 1,
    //     avatar: 'https://image-1251917893.file.myqcloud.com/Esports/new/admin/evaluation-happy.png',
    //     name: '鸳',
    //     score: '123',
    //   },
    // ];
    // const myRank  = {
    //   rank: 1,
    //   avatar: 'https://image-1251917893.file.myqcloud.com/Esports/new/admin/evaluation-happy.png',
    //   name: '鸳',
    //   score: '123',
    // };
    return (
      <PopupContainer
        title={title}
        size='big'
        onClickClose={onClickClose}
      >
        {/* 排名显示128名玩家 */}
        <div className={styles['bd-title']}>
          {titleTips}
        </div>
        {rankList && rankList?.length > 0
          ? (
            <div className={styles['rank-list']}>
              {rankList.map((value, index) => (
                <div
                  key={index}
                  className={`${styles['rank-item']} ${styles[`rank-item${value.rank}`]}`}
                >
                  <div className={styles['rank-num-box']}>
                    {
                      value.rank >= 1 && 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 <= 0 ? '--' : value.rank} </div>
                    }
                  </div>
                  <div className={styles['rank-avatar']}>
                    <CdnImage
                      className={styles['rank-avatar-img']}
                      src={value.avatar}
                    />
                    <div className={styles['rank-border']}/>
                  </div>
                  <text className={styles['rank-name']}>
                    {value.name}
                  </text>
                  <text className={styles['rank-university']}>
                    {value.university || ''}
                  </text>
                  <text className={styles['rank-score']}>
                    {value.score}
                  </text>
                </div>
              ))}
            </div>
          )
          : (
            <div className={styles['empty-box']}>
              <Empty text={emptyText}/>
            </div>
          )}
        {myRank?.name && (
        <div className={`${styles['my-rank-item']} ${styles[`rank-item${myRank.rank}`]}`}>
          <div className={styles['rank-num-box']}>
            {
              myRank.rank >= 1 && myRank.rank <= 3 ? (
                <CdnImage
                  className={styles['rank-num-img']}
                  src={`https://image-1251917893.file.myqcloud.com/Esports/pix/img/icon-rank${myRank.rank}.png`}
                />
              ) : <div className={`${styles['rank-num']} ${styles['my-rank-num']}`}> {myRank.rank <= 0 ? '--' : myRank.rank} </div>
            }
          </div>
          <div className={styles['rank-avatar']}>
            <CdnImage
              className={styles['rank-avatar-img']}
              src={myRank.avatar}
            />
            <div className={styles['rank-border']}/>
          </div>
          <text className={styles['rank-name']}>
            {myRank.name}
          </text>
          <text className={styles['rank-university']}>
            {myRank.university || ''}
          </text>
          <text className={styles['rank-score']}>
            {myRank.score}
          </text>
        </div>
        )}
      </PopupContainer>
    );
  }
}