import { h, CSSProperties } from 'preact';

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

import { $t } from '../../../locale';

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

const MatchingItem = (props: any) => {
  const overflowStyle: CSSProperties = {
    overflowStyle: 'none',
  };
  // 从 props 中解构参数，不提供默认值
  const {
    matchingItem, // 进行中赛事数据
    onClick, // 点击回调
  } = props;

  // 根据状态码获取状态标签
  const getStatusLabel = (item: any) => {
    if (item.isIng) { // 比赛中
      return <div className={`${styles['pmg-label-item']} ${styles['pmg-label-matching']}`}>{$t('比赛中')}</div>;
    } if (item.isSignup) { // 报名中
      return <div className={`${styles['pmg-label-item']} ${styles['pmg-label-sign-up']}`}>{$t('报名中')}</div>;
    } if (item.isEnd) { // 已结束
      return <div className={`${styles['pmg-label-item']} ${styles['pmg-label-end']}`}>{$t('已结束')}</div>;
    }
    return null;
  };

  return (
    <div
      className={styles['pmg-matching-item']}
      onClick={onClick}
    >
      {getStatusLabel(matchingItem)}
      <div className={styles['pmg-match-info']}>
        <div className={styles['pmg-match-name']}>
          <text className={styles['pmg-match-name-text']}>{matchingItem.matchName}</text>
        </div>
        <div
          className={styles['pmg-match-label']}
          style={overflowStyle}
        >
          {
            (matchingItem.matchLabel || []).map((label, labelIndex) => (
              <div
                key={labelIndex}
                className={`${styles['pmg-match-label-item']} ${label.isline ? styles['pmg-line-item'] : ''} `}
              >
                {label.labelIcon && <div className={`${styles[label.labelIcon]}`}/>}
                {label.labelName}
              </div>
            ))
          }
        </div>
        <div className={styles['pmg-match-award-box']}>
          {matchingItem.matchAward?.awardImg && (
            <div className={styles['pmg-match-award']}>
              <CdnImage
                className={styles['pmg-match-award-img']}
                src={matchingItem.matchAward?.awardImg}
              />
            </div>
          )}
          <div className={styles['pmg-match-award-name']}>
            <text className={styles['pmg-match-award-name-text']}>{matchingItem.matchAward?.awardName}</text>
          </div>
        </div>
      </div>
      <div className={styles['pmg-match-logo']}>
        <CdnImage
          className={styles['pmg-match-logo-img']}
          src={matchingItem.matchLogo}
        />
      </div>
    </div>
  );
};

export default MatchingItem;