/** @format */

import { ProCard } from "@ant-design/pro-components";
import { Avatar, Button, Divider, Flex, Input, 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,
	LeftOutlined,
	ShareAltOutlined,
} 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={false} boxShadow={false}>
					<div className={styles.share_list_header}>
						<div>
							<Button
								shape="circle"
								icon={<LeftOutlined />}
								onClick={() => {
									navigate("/main/share");
								}}
							/>
							<Input
								placeholder="搜索"
								style={{ borderRadius: 20, width: 500, marginLeft: 20 }}
							/>
						</div>

						<Button
							icon={<ShareAltOutlined />}
							type={"primary"}
							onClick={() => {
								navigate("/main/share/add");
							}}>
							分享
						</Button>
					</div>
				</ProCard>
				<ProCard bordered={false} boxShadow={false}>
					<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}
							header={
								<>
									<h4>分享列表</h4>
								</>
							}
							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: "300px" }}>
														<Flex vertical={false} align={"center"}>
															<Avatar
																src={logo as any}
																size={"small"}
															/>
															<span
																style={{
																	fontSize: 12,
																	color: "gray",
																	overflow: "hidden",
																}}>
																landaiqing
															</span>
														</Flex>
														<Flex vertical={false} align={"center"}>
															<HeartOutlined />
															<span
																style={{
																	fontSize: 12,
																	color: "gray",
																}}>
																1024
															</span>
														</Flex>
														<Flex vertical={false} align={"center"}>
															<CommentOutlined />
															<span
																style={{
																	fontSize: 12,
																	color: "gray",
																}}>
																1024
															</span>
														</Flex>
														<Flex vertical={false} align={"center"}>
															<EyeOutlined
																style={{ color: "gray" }}
															/>{" "}
															<span
																style={{
																	fontSize: 12,
																	color: "gray",
																}}>
																1024
															</span>
														</Flex>
													</Flex>
												</Flex>
											</>
										}
									/>
									{/*<div>Content</div>*/}
								</List.Item>
							)}
						/>
					</InfiniteScroll>
				</ProCard>
			</div>
		</>
	);
};
