/** @format */

import React, { useState, useEffect } from 'react';
import QueueAnim from 'rc-queue-anim';
import isEqual from 'lodash/isEqual';
import { Container } from './styled';

interface DetailListProps {
  data: Record<string, any>[];
  limit: number;
  color: string;
  subTitle?: string;
  size: {
    width: number;
    height: number;
  };
}

const StewardList = (props: DetailListProps) => {
  const {
    data = [],
    limit = 4,
    size: { width, height },
    subTitle = '授课积分',
  } = props;

  const [key, setKey] = useState('-1');
  const [cachedData, setCachedData] = useState<Record<string, any>[]>([]);

  useEffect(() => {
    if (!isEqual(data, cachedData)) {
      setCachedData(data);
    }
  }, [data]);

  useEffect(() => {
    setKey(new Date().getTime().toString());
  }, [cachedData, limit, height]);

  const formatData = data && data.length ? data.slice(0, limit) : [];

  return (
    <Container style={{ width, height }}>
      <QueueAnim
        style={{
          height,
        }}
        key={key}
        component="div"
        animConfig={{ opacity: [1, 0], height: [`${~~((1 / formatData.length) * 100)}%`, 0] }}
        duration={1000}
        leaveReverse
      >
        {data && data.length
          ? formatData.map((item: Record<string, any>) => (
              <div className="flex-row" key={item.id}>
                <img className="portrait" src={item.portrait} />
                <div className="center">
                  <div className="name">{item.name}</div>
                  <div className="sub-info">
                    <span className="level">{subTitle}</span>
                    <span className="value">{item.value}</span>
                  </div>
                </div>
              </div>
            ))
          : null}
      </QueueAnim>
    </Container>
  );
};

export default StewardList;