import classNames from 'classnames';
import { h, Component } from 'preact';

import AwardItem from '../award-item/award-item';
import CdnImage from '../cdn-image/cdn-image';
import Loading from '../loading/loading';
import MatchInfoItem from '../match-info-item/match-info-item';
// 主页赛制下拉
// import MatchSelect from './component/MatchSelect/MatchSelect';
// 主页比分 || vs
// 主页胜负场次 未晋级
// 主页排名
import MatchRank from '../match-rank/match-rank';
import MatchResult from '../match-result/match-result';
import MatchScoreVs from '../match-score-vs/match-score-vs';
// 赛程阶段
import MatchStage from '../match-stage/match-stage';
import MyInfoItemV2 from '../my-info-item-v2/my-info-item-v2';
import SkillPart from '../skill-part/skill-part';

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

export default class MatchPage extends Component<any, any> {
  render() {
    const {
      matchName,
      background,
      isMerchant,
      logo,
      buttonTips,
      mapText,
      ruleTips,
      scoreTips,
      taskTime,
      buttonDisable,
      buttonText,
      isLoading,
      onClickBack,
      onClickButton,
      onClickMapInfo,
      onClickShowRankDialog,
      onClickShowRuleDialog,
      onClickShowAwardsDialog,
      onClickTasks,
      // userPointRaceData,
      showPlay,
      showGroup,
      showAddGroupButton,
      groupBtnText,
      showShare,
      onClickPlay,
      onClickGroup,
      onClickShare,
      showSchedule,
      onClickSchedule,
      mySchInfo,
      roundInfoText,
      myLastRankInfo,
      // isOpenSelect,
      // selectedValue,
      // sidebar,
      matchZone = '',
      hideTaskAward,
      hideMatchAward,
      showPromotionSuccessTag,
      // showPromotionFailTag,
      noPassText,
      hideRankAndScore,
      onClickGroupPopup,
      onClickAchievement,
      onClickLocation,
      curStageInfo,
      showRankEntrance = true,
      nextStageName = '',

      isIce, // 是否冰雪节活动
      isValentine, // 是否情人节活动
      isCustomMatch, // 1v1节点赛
      isBrawlActivity, // 无限乱斗活动
      isSolo, // 单挑赛
      isRandomBarrage, // 随机弹幕
      showScheduleInfo, // 是否显示赛程
      awardList = [],
      taskList = [],
      myInfoItem = [],

      pureScoreRankDesc = '', // 一段文字，取代排名、积分的显示
      onClickMyAward,
      showAchievementDot,
      awardDot,
      awardLabel,
    } = this.props;

    const renderScoreAndRank = () => {
      if (showScheduleInfo) {
        return (
          <MatchScoreVs
            mySchInfo={mySchInfo}
            isVS={mySchInfo.schNoStart}
          />
        );
      }

      if (pureScoreRankDesc) {
        return (
          <MatchResult
            myInfoItem={myInfoItem}
            noPassText={pureScoreRankDesc}
          />
        );
      }

      if (myLastRankInfo?.rank) {
        return <MatchRank myInfoItem={myLastRankInfo} />;
      }

      return (
        <div className={styles['my-info']}>
          <MyInfoItemV2
            avatar={myInfoItem.head}
            title={myInfoItem.name}
            pinyin="ZHANG HAO"
          />
          {!hideRankAndScore && showRankEntrance && myInfoItem?.rank && (
          <MyInfoItemV2
            num={myInfoItem.rank}
            title="排名"
            pinyin="PAI MING"
          />
          )}

          {!hideRankAndScore && (
          <MyInfoItemV2
            num={myInfoItem.score}
            title="积分"
            pinyin="JI FEN"
          />
          )}
        </div>
      );
    };

    const renderButtonBox = () => {
      if (showPromotionSuccessTag) {
        return (
          <div className={styles['btn-to-promoted']}>
            <div>恭喜晋级{nextStageName}</div>
          </div>
        );
      }
      if (noPassText) {
        return (
          <div className={`${styles['btn-to-bsjs']} ${buttonText ? styles['btn-position'] : ''} `}>
            <div>{noPassText}</div>
          </div>
        );
      }
      if (buttonText) {
        return (
          <div
            className={`${buttonDisable ? styles['btn-matching'] : styles['btn-to-match']}`}
            onClick={onClickButton}
          >
            {isRandomBarrage && (
            <SkillPart
              className={styles['skill-part-box']}
              buffList={this.props.buffList}
              onClickBuff={this.props.onClickBuff}
            />
            )}
            <div className={`${buttonDisable ? styles['btn-matching-text'] : styles['btn-to-match-text']}`}>{buttonText}</div>
          </div>
        );
      }
    };


    let backgroundImg;
    if (background) {
      backgroundImg = background;
    } else if (isCustomMatch) {
      backgroundImg = 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/solo-bg.png';
    } else if (isValentine) {
      backgroundImg = 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-bg.png';
    } else if (isBrawlActivity) {
      backgroundImg = 'https://image-1251917893.file.myqcloud.com/Esports/pix/brawl/brawl-bg.png';
    } else if (isRandomBarrage) {
      backgroundImg = 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/random/random-bg.png';
    } else if (isSolo) {
      backgroundImg = 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/solo-bg.png';
    } else {
      backgroundImg = 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/bg-head.png';
    }


    return (
      // index-page 通用必写
      // index-page-ice 冰雪节
      // index-page-velentine 情人节
      // index-page-brawl 无限乱斗
      // index-page-merchant 商户赛样式
      <div
        className={classNames([
          styles['index-page'],
          {
            [styles['index-page-ice']]: isIce,
            [styles['index-page-merchant']]: isMerchant,
            [styles['index-page-velentine']]: isValentine,
            [styles['index-page-solo']]: isCustomMatch || isSolo,
            [styles['index-page-brawl']]: isBrawlActivity,
            [styles['index-page-random']]: isRandomBarrage,
            [styles['index-page-solo']]: isSolo,
          },
        ])}
      >
        {!isLoading ? (
          <div className={styles['index-page-content']}>
            <div className={styles['page-right']}>
              <div className={styles['bg-head-box']}>
                <CdnImage
                  className={styles['bg-head']}
                  src={backgroundImg}
                />
              </div>
              <div className={styles['bg-logo-box']}>
                <div className={styles['bg-logo-shadow']} />
                <CdnImage
                  className={styles['bg-logo']}
                  src={logo}
                />
              </div>
              <div className={styles['btn-box']}>
                {renderButtonBox()}
                {buttonTips && (
                <text
                  className={styles['btn-num']}
                >
                  {buttonTips}
                </text>
                )}
              </div>
            </div>

            <div className={styles['page-left']}>
              <text className={styles['match-name']}>
                {matchName}
              </text>
              <div className={styles['match-info']}>
                <MatchStage
                  color="blue"
                  clickMatchStage={this.props.clickMatchStage}
                  stageName={curStageInfo?.stageName}
                  stageTimeDesc={curStageInfo?.stageTimeDesc}
                />
                <MatchInfoItem
                  icon="map"
                  info={mapText}
                  onClickItem={onClickMapInfo}
                />
                {
                  ruleTips &&  (
                  <MatchInfoItem
                    icon="score"
                    info={ruleTips}
                  />
                  )
                }
              </div>
              <div className={styles['award-box']}>
                {!hideMatchAward && (
                <AwardItem
                  awardList={awardList}
                  title="比赛奖励"
                  pinyin="BI SAI JIANG LI"
                  showDot={awardDot}
                  onClickShowAwardsDialog={onClickShowAwardsDialog}
                />
                )}
                {!hideTaskAward && (
                <div className={`${styles['task-award']} ${awardList.length > 3 ? styles['reduce-spacing'] : ''} `}>
                  <AwardItem
                    awardList={taskList}
                    time={taskTime}
                    title="任务奖励"
                    pinyin="REN WU JIANG LI"
                    showLabel={awardLabel}
                    onClickShowAwardsDialog={onClickTasks}
                  />
                </div>
                )}
              </div>

              {renderScoreAndRank()}

              {/* 提示 */}
              <div className={styles['match-tips']}>
                {
                  roundInfoText && <text className={styles['match-tips-info']}>{roundInfoText}</text>
                }
                {scoreTips}
                {showRankEntrance && (
                <div
                  className={styles['btn-rank']}
                  onClick={onClickShowRankDialog}
                >
                  榜单 &gt;&gt;
                </div>
                )}
              </div>
            </div>
            <div
              className={styles['btn-back']}
              onClick={onClickBack}
            />
            <div className={styles['right-btn-box']}>
              {/* 赛程按钮 */}
              {
                showSchedule && (
                <div
                  className={styles['btn-course']}
                  onClick={onClickSchedule}
                />
                )
              }
              {/* 直播按钮 */}
              {
                showPlay && (
                <div
                  className={styles['btn-play']}
                  onClick={onClickPlay}
                />
                )
              }
              {/* 赛区按钮 */}
              {
                matchZone && (
                <div
                  className={styles['btn-location']}
                  onClick={onClickLocation}
                > <div className={styles['location-icon']}/>{matchZone}
                </div>
                )
              }
              {/* 规则按钮 */}
              <div
                className={`${styles['btn-rule']}`}
                onClick={onClickShowRuleDialog}
              />
              {/* 分享按钮 */}
              {
                showShare && (
                <div
                  className={styles['btn-share']}
                  onClick={onClickShare}
                />
                )
              }
              {/* 加群按钮 */}
              {
                showGroup && (
                <div
                  className={styles['btn-group']}
                  onClick={onClickGroup}
                > <div className={styles['wx-icon']}/>{groupBtnText || '加群聊天拿福利'}
                </div>
                )
              }
              {/* 加群弹窗按钮 */}
              {
                showAddGroupButton && (
                <div
                  className={styles['btn-group-popup']}
                  onClick={onClickGroupPopup}
                />
                )
              }
              {/* 成就按钮 */}
              {
                <div
                  className={styles['btn-achievement']}
                  onClick={onClickAchievement}
                >
                  {showAchievementDot && (<div className={styles['red-dot']}/>)}
                </div>
              }
              {/* 我的奖品按钮 */}
              {
                <div
                  className={styles['btn-my-award']}
                  onClick={onClickMyAward}
                />
              }
            </div>
          </div>
        )
          : (
            <Loading
              onClickBack={onClickBack}
              background={true}
              loadingText="加载中..."
              showBack={true}
            />
          )}
      </div>
    );
  }
}