/** @format */

import { ProCard } from "@ant-design/pro-components";
import { Avatar, Divider, Flex, List, Skeleton, Tag } from "antd";
import { useEffect, useState } from "react";
import styles from "./index.module.less";
import InfiniteScroll from "react-infinite-scroll-component";
import { useNavigate } from "react-router-dom";
import { CommentOutlined, EyeOutlined, HeartOutlined } from "@ant-design/icons";
import logo from "@/assets/icons/aliyun.svg";
interface DataType {
	gender: string;
	name: {
		title: string;
		first: string;
		last: string;
	};
	email: string;
	picture: {
		large: string;
		medium: string;
		thumbnail: string;
	};
	nat: string;
}

export default () => {
	const navigate = useNavigate();
	const [loading, setLoading] = useState(false);
	const [data, setData] = useState<DataType[]>([]);
	const loadMoreData = () => {
		if (loading) {
			return;
		}
		setLoading(true);
		fetch("https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo")
			.then((res) => res.json())
			.then((body) => {
				setData([...data, ...body.results]);
				setLoading(false);
			})
			.catch(() => {
				setLoading(false);
			});
	};

	useEffect(() => {
		loadMoreData();
	}, []);
	return (
		<>
			<div className={styles.share_list_main}>
				<ProCard bordered={true} boxShadow={true}>
					<InfiniteScroll
						dataLength={data.length}
						next={loadMoreData}
						hasMore={data.length < 50}
						loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
						endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
						scrollableTarget="scrollableDiv">
						<List
							dataSource={data}
							renderItem={(item) => (
								<List.Item key={item.email}>
									<List.Item.Meta
										avatar={<Avatar src={item.picture.large} />}
										title={
											<>
												<a
													onClick={() => {
														navigate("/main/share/detail/1");
													}}>
													{item.name.last}
												</a>
												<Tag
													bordered={false}
													color="processing"
													style={{ marginLeft: 10 }}>
													IDM
												</Tag>
											</>
										}
										description={
											<>
												<Flex
													vertical={false}
													justify={"space-between"}
													align={"center"}>
													{item.email}
													<Flex
														vertical={false}
														align={"center"}
														justify={"space-between"}
														style={{ width: "250px" }}>
														<Avatar src={logo} size={"small"} />
														<span
															style={{
																fontSize: 12,
																color: "gray",
															}}>
															landaiqing
														</span>
														<HeartOutlined />
														<span
															style={{ fontSize: 12, color: "gray" }}>
															1024
														</span>
														<CommentOutlined />
														<span
															style={{ fontSize: 12, color: "gray" }}>
															1024
														</span>
														<EyeOutlined style={{ color: "gray" }} />{" "}
														<span
															style={{ fontSize: 12, color: "gray" }}>
															1024
														</span>
													</Flex>
												</Flex>
											</>
										}
									/>
									{/*<div>Content</div>*/}
								</List.Item>
							)}
						/>
					</InfiniteScroll>
				</ProCard>
			</div>
		</>
	);
};
