import { h, Component } from 'preact';

import PopupContainer from '../popup-container/popup-container';

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

export default class PopupPromptTimeout extends Component<any, any> {
  render() {
    const { timeoutCount, onClickClose } = this.props;
    const isSuspension = timeoutCount >= 5;
    const isWarning = 3 <= timeoutCount && timeoutCount <= 4;
    return (
      <PopupContainer
        size='small'
        onClickClose={onClickClose}
      >
        <div className={styles['prompt-content']}>
          <div className={styles['prompt-text']}>
            {isSuspension && (
            <div className={styles['prompt-text1']}>
              您已<text className={styles['prompt-light']}>5次</text>超时未进入游戏对战，已被禁止参赛
            </div>
            )}
            {isWarning && (
            <div className={styles['prompt-text1']}>
              您已<text className={styles['prompt-light']}>{timeoutCount}次</text>超时未进入游戏对战，超过5次
            </div>
            )}
            {isWarning && (
            <div className={styles['prompt-text2']}>
              超时未进入将被禁止参赛
            </div>
            )}
            {/* <div className={styles['prompt-text2']}>
              您未及时进入游戏，将被扣除200积分
            </div> */}
          </div>
          <div
            className={styles['btn-yellow']}
            onClick={onClickClose}
          >
            <text className={styles['btn-yellow-text']}>
              我知道了
            </text>
          </div>
        </div>
      </PopupContainer>
    );
  }
}