import { h, Component } from 'preact';

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

import { CountTo } from './count-to';
import styles from './css/index.less';

import type { Props } from './types';


class MyInfoItem extends Component<Props, any> {
  private countToInstance;

  constructor(props) {
    super(props);
    this.state = {
      currentValue: 0,
      preValue: props.num,
    };
  }

  componentDidMount() {
    if (this.props.preNum && this.props.preNum === this.props.num) {
      this.countTo({
        startValue: this.props.num,
        endValue: this.props.num,
      });
      return;
    }
    // 组件挂载时初始化动画
    this.countTo({
      startValue: 0,
      endValue: this.props.num,
    });
  }

  isNumber(val) {
    return !isNaN(val);
  }

  countTo = ({
    startValue,
    endValue,
  }) => {
    if (!this.isNumber(endValue) || startValue === endValue) {
      this.countToInstance?.stop?.();
      this.setState({
        currentValue: endValue,
      });
      return;
    }


    const innerStartValue = this.isNumber(startValue) ? startValue : 0;

    if (this.countToInstance) {
      this.countToInstance.start({
        startValue: innerStartValue,
        endValue,
      });
      return;
    }

    this.countToInstance = new CountTo({
      startValue: innerStartValue,
      endValue,
      onChange: (value) => {
        if (value === this.state.currentValue) return;

        this.setState({
          currentValue: value,
        });
      },
    });
  };

  // eslint-disable-next-line react/no-deprecated
  componentWillReceiveProps(nextProps: Readonly<any>): void {
    if (this.props.num !== nextProps.num) {
      this.countTo({
        startValue: this.props.num,
        endValue: nextProps.num,
      });
    }
  }

  render() {
    const { avatar, title, pinyin, reverse, isEmpty } = this.props;
    // const avatar = "https://image-1251917893.file.myqcloud.com/Esports/pix/img/avatar.png";
    // const num = "58"
    // const title = "比赛奖励";
    // const pinyin = "BI SAI JIANG LI";
    // const isShowNum = parseInt(this.props.num) > 0;

    return (
      <div className={`${styles['info-item']} ${reverse && styles['info-item-reverse']} ${isEmpty && styles['info-item-gray']} `}>
        <div className={styles['info-left']}>
          {
            <div className={styles['info-num']}>{this.state.currentValue}</div>
          }
          {
            avatar && (
            <div className={styles['info-avatar-box']}>
              <CdnImage
                className={styles['info-avatar']}
                src={avatar}
                tryTimes={3}
                errorSrc="https://image-1251917893.file.myqcloud.com/Esports/pix/img/member-empty.png"
              />
              <div className={styles['avatar-border']}/>
            </div>
            )
          }
        </div>
        <div className={styles['info-right']}>
          <text className={`${styles['info-title']} ${avatar && styles['info-title-name']}`}>
            {title}
          </text>
          <div className={styles['info-pinyin']}>
            {pinyin}
          </div>
        </div>
      </div>
    );
  }
}

export default MyInfoItem;