/** @format */

import { ProCard } from "@ant-design/pro-components";
import { Avatar, Button, Flex, Input, List, Skeleton, Tag } from "antd";
import { useEffect, useState } from "react";
import styles from "./index.module.less";
import { Link, useNavigate, useParams } from "react-router-dom";
import {
	CommentOutlined,
	EyeOutlined,
	HeartOutlined,
	LeftOutlined,
	ShareAltOutlined,
} from "@ant-design/icons";
import { shareDetailList } from "@/api/share";
import useStore from "@/utils/store/useStore.tsx";
import { observer } from "mobx-react";
interface DataType {
	gender: string;
	name: {
		title: string;
		first: string;
		last: string;
	};
	email: string;
	picture: {
		large: string;
		medium: string;
		thumbnail: string;
	};
	nat: string;
}

export default observer(() => {
	const navigate = useNavigate();
	const params = useParams();
	const [loading, setLoading] = useState(true);
	const [data, setData] = useState<DataType[]>([]);
	const store = useStore("share");
	async function getShareDetailList() {
		store.setCircleId(params.id as string);
		shareDetailList(params.id).then((res: any) => {
			console.log(res);
			if (res && res.data && res.data) {
				setData(res.data);
				setLoading(false);
			}
		});
	}

	useEffect(() => {
		getShareDetailList().then();
	}, []);
	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}>
					<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>
		</>
	);
});
