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

import { globalTheme, ThemeData } from '../../../utils/theme';
import SRank from './styled';
interface EventListProps {
  size?: Record<string, any>;
  theme?: ThemeData;
  [key: string]: any;
}

export default function EventList(props: EventListProps) {
  const {
    data = [],
    count = 3,
    size,
    textStyle,
    marginBottom = 1,
    theme,
  } = props;
  const height = (size && size.height) || 200;
  const width = (size && size.width) || 300;
  const colorList = theme ? theme : globalTheme;
  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}>
                <div className="Icon"></div>
                <div
                  style={{ color: colorList.primaryColor }}
                  className="label-top"
                >
                  TOP0{index + 1}
                </div>

                <div
                  style={{ color: `${colorList.textColor}` }}
                  className="label-text"
                >
                  {' '}
                  {item.label}
                </div>
              </div>
            </div>
          ))}
      </QueueAnim>
    </SRank>
  );
}