/** @format */

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

interface OnlineLessonListProps {
	data: Record<string, any>[];
	limit: number;
	size: {
		width: number;
		height: number;
	};
}

const OnlineLessonList = (props: OnlineLessonListProps) => {
	const {
		data = [],
		limit = 4,
		size: { width, height }
	} = 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="info">评分</span>
										<span className="value">{item.score}</span>
									</div>
								</div>
								<div className="right-area">
									<span>{item.studyNum || 0}人已学习</span>
								</div>
							</div>
					  ))
					: null}
			</QueueAnim>
		</Container>
	);
};

export default OnlineLessonList;