import { h, Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';
import { TeamMatchInfo } from '../sche-item/types';

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

export interface ScheChampoinProps {
  schId: string | number; // 赛程标识
  teamA: TeamMatchInfo;
  teamB: TeamMatchInfo;
  tips: string; // 状态文案
  status: 'waiting' | 'ing' | 'end'; // waiting 未开始 ing 进行中 end 已结束
  subscribeStatus: 'subscribed' | 'unsubscribed' | null; // 订阅比赛状态
  onChampoinClickLive?: (schId: string | number) => void; // 点击直播回调
  onChampoinClickTeams?: (schId: string | number) => void; // 点击队伍回调
  onChampoinSubscribeClick?: () => void; // 订阅比赛点击回调
  showVsTag?: boolean; // 是否显示 VS 文字（否则显示冒号图标）
}

class ScheChampoin extends Component<ScheChampoinProps> {
  render() {
    const {
      schId,
      teamA,
      teamB,
      tips,
      status,
      subscribeStatus,
      onChampoinClickLive,
      onChampoinClickTeams,
      onChampoinSubscribeClick,
      showVsTag,
    } = this.props;

    return (
      <div className={styles['champoin-schedule']}>
        <div className={styles['champoin-schedule-title']}></div>
        <div
          className={styles['champoin-schedule-box']}
          onClick={() => onChampoinClickTeams?.(schId)}
        >
          <div className={styles['champoin-schedule-item']}>
            <div className={styles['champoin-schedule-item-header']}>
              {teamA.img && (
              <div className={styles['champoin-schedule-item-img-wrapper']}><CdnImage
                className={styles['champoin-schedule-item-img']}
                src={teamA.img}
              />
              </div>
              )}
              {teamA.isMine && <div className={styles['champoin-schedule-mine-tag']}><text className={styles['champoin-schedule-tag-text']}>我</text></div>}
              {teamA.tag === 'champion' && (
              <CdnImage
                className={styles['champoin-schedule-status-tag']}
                src='https://image-1251917893.file.myqcloud.com/Esports/schedule/champion-tag.png'
              />
              )}
              {teamA.tag === 'runner-up' && (
              <CdnImage
                className={styles['champoin-schedule-status-tag']}
                src='https://image-1251917893.file.myqcloud.com/Esports/schedule/runner-up-tag.png'
              />
              )}
              {teamA.tag === 'third' && (
              <CdnImage
                className={styles['champoin-schedule-status-tag']}
                src='https://image-1251917893.file.myqcloud.com/Esports/schedule/third-tag.png'
              />
              )}
              {teamA.tag === 'qi' && <div className={styles['champoin-schedule-qi-tag']}><text className={styles['champoin-schedule-tag-text']}>弃</text></div>}
            </div>
            <div className={styles['champoin-schedule-item-name']}>
              <text className={styles['champoin-schedule-item-name-text']}>{teamA.name}</text>
            </div>
          </div>
          <div className={styles['champoin-schedule-item-center']}>
            <div className={styles['champoin-schedule-item-vs']}>
              <div className={styles['champoin-schedule-item-score']}>{teamA.score}</div>
              {showVsTag ? <div className={styles['champoin-schedule-item-vs-text']}>VS</div>
                : (
                  <CdnImage
                    className={styles['champoin-schedule-item-vs-icon']}
                    src="https://image-1251917893.file.myqcloud.com/Esports/schedule/colon-icon.png"
                    alt=""
                  />
                )}
              <div className={styles['champoin-schedule-item-score']}>{teamB.score}</div>
            </div>
            <div
              className={`${styles['champoin-schedule-item-tips']} 
              ${status === 'waiting' ? styles['champoin-schedule-item-tips-waiting'] : ''} 
              ${status === 'ing' ? styles['champoin-schedule-item-tips-ing'] : ''}`}
            >
              {tips}
              {status === 'ing' && (
                <div
                  className={styles['champoin-schedule-tips-live']}
                  onClick={() => onChampoinClickLive?.(schId)}
                >
                  比赛中
                  <CdnImage
                    className={styles['champoin-schedule-tips-icon']}
                    src="https://image-1251917893.file.myqcloud.com/Esports/schedule/live-icon.png"
                    alt=""
                  />
                </div>
              )}
            </div>
            {subscribeStatus && (
            <div
              className={styles['champoin-schedule-item-btn']}
              onClick={onChampoinSubscribeClick}
            >
              <text className={`${styles['champoin-schedule-item-btn-text']} ${subscribeStatus === 'subscribed' ? styles['champoin-schedule-item-btn-text-subscribed'] : ''}`}>{subscribeStatus === 'subscribed' ? '已订阅' : '订阅'}</text>
            </div>
            )}
          </div>
          <div className={styles['champoin-schedule-item']}>
            <div className={styles['champoin-schedule-item-header']}>
              {teamB.img && (
              <div className={styles['champoin-schedule-item-img-wrapper']}><CdnImage
                className={styles['champoin-schedule-item-img']}
                src={teamB.img}
              />
              </div>
              )}
              {teamB.isMine && <div className={styles['champoin-schedule-mine-tag']}><text className={styles['champoin-schedule-tag-text']}>我</text></div>}
              {teamB.tag === 'champion' && (
              <CdnImage
                className={styles['champoin-schedule-status-tag']}
                src='https://image-1251917893.file.myqcloud.com/Esports/schedule/champion-tag.png'
              />
              )}
              {teamB.tag === 'runner-up' && (
              <CdnImage
                className={styles['champoin-schedule-status-tag']}
                src='https://image-1251917893.file.myqcloud.com/Esports/schedule/runner-up-tag.png'
              />
              )}
              {teamB.tag === 'third' && (
              <CdnImage
                className={styles['champoin-schedule-status-tag']}
                src='https://image-1251917893.file.myqcloud.com/Esports/schedule/third-tag.png'
              />
              )}
              {teamB.tag === 'qi' && <div className={styles['champoin-schedule-qi-tag']}><text className={styles['champoin-schedule-tag-text']}>弃</text></div>}
            </div>
            <div className={styles['champoin-schedule-item-name']}>
              <text className={styles['champoin-schedule-item-name-text']}>{teamB.name}</text>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default ScheChampoin;