import { h, Component } from 'preact';

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

import styles from './css/index.less';
import { TeamMatchInfo } from './types';


export interface ScheItemProps {
  schId: string | number; // 赛程标识
  teamA: TeamMatchInfo;
  teamB: TeamMatchInfo;
  tips: string; // 状态文案
  status: 'waiting' | 'ing' | 'end'; // waiting 未开始 ing 进行中 end 已结束
  scheCodeName?: string; // 赛程代号名称
  onClickLive?: (schId: string | number) => void; // 点击直播回调
  onClickTeams?: (schId: string | number) => void; // 点击队伍回调
}

class ScheItem extends Component<ScheItemProps> {
  render() {
    const { schId, teamA, teamB, tips, status, scheCodeName, onClickLive, onClickTeams } = this.props;
    const teams = [teamA, teamB];

    return (
      <div className={styles['sche-item-teams']}>
        <div
          className={styles['sche-item-teams-box']}
          onClick={() => onClickTeams?.(schId)}
        >
          {teams.map((team, teamIndex) => (
            <div
              className={`${styles['sche-item-team']} ${team.win ? styles['sche-item-team-win'] : ''}`}
              key={teamIndex}
            >
              {team.isMine && (
                <div className={styles['sche-item-team-mine']}>
                  <text className={styles['sche-item-team-mine-text']}>我</text>
                </div>
              )}
              {team.tag === 'champion' && (
              <CdnImage
                className={styles['sche-item-team-tag']}
                src='https://image-1251917893.file.myqcloud.com/Esports/schedule/champion-tag.png'
              />
              )}
              {team.tag === 'runner-up' && (
              <CdnImage
                className={styles['sche-item-team-tag']}
                src='https://image-1251917893.file.myqcloud.com/Esports/schedule/runner-up-tag.png'
              />
              )}
              {team.tag === 'third' && (
              <CdnImage
                className={styles['sche-item-team-tag']}
                src='https://image-1251917893.file.myqcloud.com/Esports/schedule/third-tag.png'
              />
              )}
              <CdnImage
                className={styles['sche-item-team-logo']}
                src={team.img}
              />
              <text className={styles['sche-item-team-name']}>
                {team.name}
              </text>
              <div className={styles['sche-item-team-score']}>
                <text className={`${styles['sche-item-team-score-number']} ${team.score === '弃' ? styles['sche-item-team-score-quit'] : ''}`}>{team.score}</text>
              </div>
            </div>
          ))}
        </div>
        <div
          className={`${styles['sche-item-tips']} 
          ${status === 'waiting' ? styles['sche-item-tips-waiting'] : ''} 
          ${status === 'ing' ? styles['sche-item-tips-ing'] : ''}`}
        >
          {scheCodeName && <div className={styles['sche-item-tips-round']}>{scheCodeName}</div>}
          {tips}
          {status === 'ing' && (
            <div
              className={styles['sche-item-tips-live']}
              onClick={() => onClickLive?.(schId)}
            >
              比赛中
              <CdnImage
                className={styles['sche-item-tips-live-icon']}
                src="https://image-1251917893.file.myqcloud.com/Esports/schedule/live-icon.png"
                alt=""
              />
            </div>
          )}
        </div>
      </div>
    );
  }
}

export default ScheItem;