/** @format */

import { ProCard } from "@ant-design/pro-components";
import { Avatar, Button, Empty, Flex, Input, List, Skeleton, Tag } from "antd";
import { useEffect, useState } from "react";
import styles from "./index.module.less";

import { Link, useNavigate } from "react-router-dom";
import { CommentOutlined, EyeOutlined, HeartOutlined } from "@ant-design/icons";
import { getMyShareList } from "@/api/share";
import useStore from "@/utils/store/useStore.tsx";
import { observer } from "mobx-react";

export default observer(() => {
	const navigate = useNavigate();
	const [loading, setLoading] = useState(true);
	const [data, setData] = useState<[]>([]);
	const store = useStore("user");
	const userId: any = store.getUserId();
	async function getMyShare() {
		getMyShareList(userId).then((res: any) => {
			if (res && res.success && res.data) {
				setData(res.data);
				setLoading(false);
			}
		});
	}

	useEffect(() => {
		getMyShare().then();
	}, []);
	return (
		<>
			<div className={styles.share_list_main}>
				<ProCard bordered={false} boxShadow={false}>
					<div className={styles.share_list_header}>
						<Flex
							vertical={false}
							align={"center"}
							justify={"space-between"}
							style={{ width: "100%" }}>
							<div>
								<Input
									placeholder="搜索"
									style={{ borderRadius: 20, width: 500, marginLeft: 20 }}
								/>
							</div>
							<div>
								<Button
									type={"primary"}
									onClick={() => {
										navigate("/main/share/add");
									}}>
									去分享
								</Button>
							</div>
						</Flex>
					</div>
				</ProCard>
				<ProCard bordered={false} boxShadow={false}>
					{data.length === 0 ? (
						<Empty description={"暂无数据"}></Empty>
					) : (
						<>
							<Skeleton loading={loading} active={true} paragraph={{ rows: 14 }}>
								<List
									dataSource={data}
									header={
										<>
											<h4>分享列表</h4>
										</>
									}
									renderItem={(item: any) => (
										<List.Item key={item.id}>
											<List.Item.Meta
												avatar={<Avatar src={item.icon} />}
												title={
													<Flex vertical={false} align={"center"}>
														<Link to={"/main/share/detail/" + item.id}>
															{item.title}
														</Link>
														{item.tags &&
															Array.from(item.tags).map(
																(tag: any, index: number) => {
																	return (
																		<Flex
																			vertical={false}
																			align={"center"}
																			key={index}>
																			<Tag
																				bordered={false}
																				color={
																					"#" + tag.color
																				}
																				style={{
																					marginLeft: 10,
																				}}>
																				{tag.tagName}
																			</Tag>
																		</Flex>
																	);
																},
															)}
													</Flex>
												}
												description={
													<>
														<Flex
															vertical={false}
															justify={"space-between"}
															align={"center"}>
															{item.description}
															<Flex
																vertical={false}
																align={"center"}
																justify={"space-between"}
																style={{ width: "300px" }}>
																<Flex
																	vertical={false}
																	align={"center"}>
																	<Avatar
																		src={item.avatar as any}
																		size={"small"}
																	/>
																	<span
																		style={{
																			fontSize: 12,
																			color: "gray",
																			overflow: "hidden",
																		}}>
																		{item.nickname}
																	</span>
																</Flex>
																<Flex
																	vertical={false}
																	align={"center"}>
																	<HeartOutlined />
																	<span
																		style={{
																			fontSize: 12,
																			color: "gray",
																		}}>
																		{item.likesCount}
																	</span>
																</Flex>
																<Flex
																	vertical={false}
																	align={"center"}>
																	<CommentOutlined />
																	<span
																		style={{
																			fontSize: 12,
																			color: "gray",
																		}}>
																		{item.commentCount}
																	</span>
																</Flex>
																<Flex
																	vertical={false}
																	align={"center"}>
																	<EyeOutlined
																		style={{ color: "gray" }}
																	/>{" "}
																	<span
																		style={{
																			fontSize: 12,
																			color: "gray",
																		}}>
																		{item.views}
																	</span>
																</Flex>
															</Flex>
														</Flex>
													</>
												}
											/>
										</List.Item>
									)}
								/>
							</Skeleton>
						</>
					)}
				</ProCard>
			</div>
		</>
	);
});