import QueueAnim from 'rc-queue-anim';
import React from 'react';

import SRank from './styled';

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

export default function EventList(props: EventListProps) {
  const {
    data = [],
    count = 3,
    size,
    textStyle,
    background,
    marginBottom = 1,
    firstRowColor,
  } = props;
  const height = (size && size.height) || 200;
  const width = (size && size.width) || 300;

  function getRowBg(i: number) {
    if (i === 0 && firstRowColor) {
      return firstRowColor;
    } else {
      return background;
    }
  }

  return (
    <SRank style={{ width, height }}>
      <QueueAnim
        style={{
          height,
        }}
        component="div"
        animConfig={{
          opacity: [1, 0],
          height: [`${~~((1 / count) * 100)}%`, 0],
        }}
        duration={1000}
        leaveReverse
      >
        {data
          .slice(0, count)
          .map((item: Record<string, any>, index: number) => (
            <div
              className="listItem"
              key={index}
              style={{
                height: parseInt(height) / count,
                ...textStyle,
                background: getRowBg(index),
                marginBottom,
              }}
            >
              <div className="label" title={item.label}>
                <img
                  className="imgIcon"
                  src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/46ecdb9a-61a1-458e-98bc-47be0a5510a8.png"
                />
                {item.label}
              </div>
              <div className="time">{item.value}</div>
            </div>
          ))}
      </QueueAnim>
    </SRank>
  );
}
EventList.themeUpdate = function(params: any) {
  return {
    firstRowColor: params.primaryColor,
    background: params.secondColor,
  };
};