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

import SBarCrosswiseList from './styled';

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

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

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

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

    if (data && data.length > count && animate) {
      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',
      color = 'rgba(74, 74, 74, 0.45)',
      bgLineHeight = 5,
      lineHeight = 5,
      showLeft = false,
      animate = false,
      unitStyle,
      valueStyle,
      littleTitle,
      littleTitleStyle,
      rightMargin,
      lineType,
      rightWidth,
      lineTotal,
    } = this.props;
    const { currentIndex } = this.state;
    let total = 0;
    const dataRender: Record<string, any>[] = [];

    data &&
      data.length > 0 &&
      data.forEach((item: Record<string, any>, index: number) => {
        total += item.value;
        dataRender.push({ ...item, index: index + 1 });
      });

    return (
      <SBarCrosswiseList style={size} rightWidth={rightWidth}>
        <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: any, index: number) => (
              <div
                key={`${item.label}${item.value}${index}`}
                style={{ height: height / count }}
                className="item"
              >
                {showLeft ? (
                  <>
                    <div className="left">
                      <div className="title">NO. {item.index}</div>
                      <img
                        src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/284fa63a-0f52-4b25-bae3-a425dd0a3a1b.png"
                        alt=""
                      />
                    </div>
                  </>
                ) : null}

                <div className="mid">
                  <div className="text" style={textStyle}>
                    {item.label}
                  </div>
                  <div
                    className="progress"
                    style={{ height: bgLineHeight, background: color }}
                  >
                    <div
                      className="innerP"
                      style={{
                        width: `${
                          lineTotal
                            ? (item.value / lineTotal) * 100
                            : (item.value / total) * 100
                        }%`,
                        backgroundImage: `linear-gradient(90deg, ${color1} 0%, ${color2} 100%)`,
                        height: lineHeight,
                        borderTopRightRadius:
                          lineType === 'radius' ? lineHeight / 2 : 0,
                        borderBottomRightRadius:
                          lineType === 'radius' ? lineHeight / 2 : 0,
                      }}
                    />
                  </div>
                </div>
                <div className="right" style={{ marginTop: rightMargin }}>
                  <span style={{ marginRight: 4, ...littleTitleStyle }}>
                    {littleTitle}
                  </span>
                  <span style={{ marginRight: 4, ...valueStyle }}>
                    {item.value}
                  </span>
                  <span style={{ ...unitStyle }}>{unit}</span>
                </div>
              </div>
            ))}
        </QueueAnim>
      </SBarCrosswiseList>
    );
  }
}
BarCrosswiseListComponent.themeUpdate = function(params: any) {
  return {
    color1: params.primaryColor,
    color2: params.secondColor,
  };
};