import QueueAnim from 'rc-queue-anim';
import React, { PureComponent } from 'react';

import SRRankList from './styled';

interface RRankListProps {
  size: Record<string, any>;
  [key: string]: any;
}

interface RRankListState {
  [key: string]: any;
}

export default class RRankListComponent extends PureComponent<
  RRankListProps,
  RRankListState
> {
  state = {
    currentIndex: 1,
  };
  timer: number | null = null;
  componentDidMount() {
    this.setTimer(this.props.data, this.props.count);
  }
  UNSAFE_componentWillReceiveProps(nextProps: Record<string, any>) {
    const { data, count } = nextProps;
    if (data !== this.props.data || count !== this.props.count) {
      this.setTimer(data, count);
    }
  }
  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  setTimer = (data: Record<string, any>[], count: number) => {
    if (this.timer) {
      clearInterval(this.timer);
    }

    if (data && data.length > count) {
      this.timer = setInterval(() => {
        this.setState(state => ({
          currentIndex:
            state.currentIndex >= Math.ceil(data.length / count)
              ? 1
              : state.currentIndex + 1,
        }));
      }, 3000);
    } else {
      this.setState(state => ({
        currentIndex: 1,
      }));
    }
  };

  render() {
    const {
      data = [],
      // total, // 总数
      count = 3, // 默认显示3个
      divideHeight = '33%', // 默认高度3等分
      size: { height, width },
      unit,
      size,
      textStyle,
      color1 = '#806aff',
      color2 = '#2cb4f9',
    } = this.props;
    const { currentIndex } = this.state;
    let total = 0;
    const dataRender: Record<string, any>[] = [];
    data.forEach((item: Record<string, any>, index: number) => {
      total += item.value;
      dataRender.push({ ...item, index: index + 1 });
    });
    return (
      <SRRankList style={size}>
        <QueueAnim
          style={{
            height,
          }}
          component="div"
          animConfig={{
            opacity: [1, 0],
            height: [`${~~((1 / count) * 100)}%`, 0],
          }}
          duration={1000}
          leaveReverse
        >
          {dataRender
            .slice((currentIndex - 1) * count, currentIndex * count)
            .map(item => (
              <div
                key={`${item.label}${item.value}`}
                style={{ height: height / count }}
              >
                <div className="text" style={textStyle}>
                  <div
                    className="label"
                    title={`NO.${item.index}   ${item.label}`}
                  >
                    NO.
                    {item.index}
                    &nbsp;&nbsp;&nbsp;
                    {item.label}
                  </div>
                  <div className="count">
                    <span style={{ marginRight: 4 }}>{item.value}</span>
                    <span style={{ ...textStyle, fontSize: 12 }}>{unit}</span>
                  </div>
                </div>
                <div className="progress">
                  <div
                    className="innerP"
                    style={{
                      width: `${(item.value / total) * 100}%`,
                      backgroundImage: `linear-gradient(90deg, ${color1} 0%, ${color2} 100%)`,
                    }}
                  />
                </div>
              </div>
            ))}
        </QueueAnim>
      </SRRankList>
    );
  }
}
RRankListComponent.themeUpdate = function(params: any) {
  return {
    color1: params.primaryColor,
    color2: params.secondColor,
  };
};