/** @format */
import React, { useEffect, useState } from "react";
import { Avatar, Button, Card, Divider, Flex, message, Skeleton, Tag, Tooltip } from "antd";
import {
	CommentOutlined,
	ExportOutlined,
	EyeOutlined,
	HeartOutlined,
	InfoCircleOutlined,
	LeftOutlined,
	LikeOutlined,
	StarOutlined,
	TagsOutlined,
	WarningOutlined,
} from "@ant-design/icons";
import { useNavigate, useParams } from "react-router-dom";
import "aieditor/dist/style.css";
import { ProCard } from "@ant-design/pro-components";
import styles from "./index.module.less";
import { Typography } from "antd";
import Comment from "@/components/Main/Share/components/ShareDetail/components/Comment";
import getRandomColor from "@/constant/random-color.ts";
const { Paragraph } = Typography;
import like from "@/assets/icons/like.svg";
import favorite from "@/assets/icons/favorite.svg";
import useStore from "@/utils/store/useStore.tsx";
import { addLikeDetail, deletedLikeDetail, getShareDetail } from "@/api/share";
import StorageIcon from "@/constant/stroage-icon.ts";
import { observer } from "mobx-react";
import { addFavorites, deleteFavorites } from "@/api/user";
const ShareDetail: React.FunctionComponent = () => {
	const navigate = useNavigate();
	const store = useStore("share");
	const userStore = useStore("user");
	const userId: any = userStore.getUserId();
	const params = useParams();
	const [detail, setDetail] = useState<any>({} as any);
	const [loading, setLoading] = useState(true);
	async function getDetail() {
		getShareDetail(params.id).then((res: any) => {
			if (res && res.success && res.data) {
				setDetail(res.data);
				setLoading(false);
			}
		});
	}
	async function addLike() {
		const data: any = {
			circleId: store.getCircleId(),
			userId: userId,
			detailId: params.id,
		};
		addLikeDetail(data).then();
	}
	async function delLike() {
		const data: any = {
			circleId: store.getCircleId(),
			userId: userId,
			detailId: params.id,
		};
		deletedLikeDetail(data).then();
	}
	async function setFavorites() {
		const data: any = {
			userId: userId,
			detailId: params.id,
			circleId: store.getCircleId(),
		};
		addFavorites(data).then((res: any) => {
			if (res && res.success) {
				message.open({
					type: "success",
					content: "收藏成功",
				});
				getDetail().then();
			} else {
				message.open({
					type: "error",
					content: "收藏失败",
				});
			}
		});
	}
	async function cancelFavorites() {
		const data: any = {
			userId: userId,
			detailId: params.id,
			circleId: store.getCircleId(),
		};
		deleteFavorites(data).then((res: any) => {
			if (res && res.success) {
				message.open({
					type: "success",
					content: "取消成功",
				});
				getDetail().then();
			} else {
				message.open({
					type: "error",
					content: "取消失败",
				});
			}
		});
	}

	useEffect(() => {
		getDetail().then();
	}, []);
	return (
		<>
			<Skeleton loading={loading} active={true} paragraph={{ rows: 16 }}>
				<ProCard bordered={true}>
					<Flex vertical={false} align={"center"} justify={"space-between"}>
						<Button
							shape="circle"
							icon={<LeftOutlined />}
							onClick={() => {
								const circleId = store.getCircleId();
								navigate("/main/share/list/" + circleId);
							}}
						/>
						<Flex vertical={false} align={"center"}>
							<h3>{detail.title as string}</h3>
						</Flex>
						<Flex
							vertical={false}
							align={"center"}
							justify={"space-between"}
							style={{ width: "20%" }}>
							<Flex vertical={false} align={"center"}>
								<Avatar src={detail.avatar as any} size={"small"} />
								<span
									style={{
										fontSize: 12,
										color: "gray",
										overflow: "hidden",
									}}>
									{detail.nickname || "unknown"}
								</span>
							</Flex>
							<Flex vertical={false} align={"center"}>
								<HeartOutlined />
								<span
									style={{
										fontSize: 12,
										color: "gray",
									}}>
									{detail.likesCount || 0}
								</span>
							</Flex>
							<Flex vertical={false} align={"center"}>
								<CommentOutlined />
								<span
									style={{
										fontSize: 12,
										color: "gray",
									}}>
									{detail.commentCount || 0}
								</span>
							</Flex>
							<Flex vertical={false} align={"center"}>
								<EyeOutlined style={{ color: "gray" }} />{" "}
								<span
									style={{
										fontSize: 12,
										color: "gray",
									}}>
									{detail.views || 0}
								</span>
							</Flex>
						</Flex>
					</Flex>
				</ProCard>
				<div className={styles.share_detail_container}>
					<ProCard bordered={true}>
						<div
							style={{ height: 500 }}
							dangerouslySetInnerHTML={{ __html: detail.content }}></div>

						<Card style={{ borderRadius: "10px", borderColor: "#1677FF" }}>
							<Flex vertical={false} align={"center"} justify={"space-between"}>
								<span
									style={{
										fontSize: 18,
										color: "#1677FF",
										fontWeight: "bolder",
									}}>
									资源下载
								</span>
								<Button icon={<WarningOutlined />} type={"primary"}>
									投诉
								</Button>
							</Flex>
							<Flex
								vertical={false}
								align={"center"}
								style={{ marginTop: 10 }}
								justify={"space-between"}>
								<span style={{ fontSize: 16 }}>{detail.title}</span>
							</Flex>
							<Flex
								vertical={false}
								align={"center"}
								style={{ marginTop: 10 }}
								justify={"space-between"}>
								<span
									style={{
										fontSize: 18,
										color: "#1677FF",
										fontWeight: "bolder",
									}}>
									下载地址
								</span>
							</Flex>
							<Flex
								vertical={false}
								align={"center"}
								style={{ marginTop: 10 }}
								justify={"flex-start"}>
								{detail.urls &&
									Array.from(detail.urls).map((url: any, index: number) => {
										return (
											<div key={index}>
												<Card
													hoverable={true}
													style={{
														width: 280,
														height: 140,
														marginLeft: 10,
													}}>
													<Flex vertical={true}>
														<Flex
															vertical={false}
															justify={"space-between"}
															align={"center"}>
															<div>
																<Avatar
																	src={
																		StorageIcon[url.type] as any
																	}></Avatar>
																<span
																	style={{
																		marginLeft: 10,
																		color: "#1677FF",
																		fontSize: 16,
																	}}>
																	{url.typeName}
																</span>
															</div>
															<ExportOutlined
																className={styles.link_btn}
																onClick={() => {
																	window.open(url.url, "_blank");
																}}
															/>
														</Flex>
														<Divider></Divider>
														<Flex vertical={false}>
															<Tooltip
																title={url.description}
																placement={"bottom"}>
																<span
																	style={{
																		width: 150,
																		overflowX: "hidden",
																	}}>
																	{url.description}
																</span>
															</Tooltip>
															<span
																style={{
																	width: 130,
																	marginLeft: 10,
																	display: "flex",
																	flexDirection: "row",
																}}>
																<span style={{ color: "#1677FF" }}>
																	密码：
																</span>{" "}
																<Paragraph copyable>
																	{url.password}
																</Paragraph>
															</span>
														</Flex>
													</Flex>
												</Card>
											</div>
										);
									})}
							</Flex>
							<Flex vertical={false} style={{ marginTop: 10 }}>
								<span style={{ color: "grey" }}>
									<InfoCircleOutlined />
									本站所有资源均来源于网络，仅供学习使用，请下载后24小时内删除
								</span>
							</Flex>
						</Card>

						<Flex vertical={false} align={"center"} style={{ marginTop: 20 }}>
							<TagsOutlined style={{ fontSize: 30, color: "#1677FF" }} />
							<Flex vertical={false} align={"center"} style={{ marginLeft: 10 }}>
								{detail.tags &&
									Array.from(detail.tags).map((tag: any, index: number) => {
										return (
											<div key={index}>
												<Tag bordered={false} color={"#" + detail.color}>
													{tag.tagName}
												</Tag>
											</div>
										);
									})}
							</Flex>
						</Flex>
						<Flex
							vertical={false}
							align={"center"}
							justify={"center"}
							style={{ height: 50 }}>
							{detail.isLike === true ? (
								<>
									<Tooltip title={"取消点赞"} placement={"bottom"}>
										<Avatar
											className={styles.like_icon}
											src={like as any}
											onClick={() => {
												delLike().then();
											}}
											size={"large"}></Avatar>
									</Tooltip>
								</>
							) : (
								<>
									<Tooltip title={"点赞"} placement={"bottom"}>
										<LikeOutlined
											className={styles.detail_link_btn}
											onClick={() => {
												addLike().then();
											}}></LikeOutlined>
									</Tooltip>
								</>
							)}

							{detail.isFavor === true ? (
								<>
									<Tooltip title={"取消收藏"} placement={"bottom"}>
										<Avatar
											className={styles.favtorie_icon}
											src={favorite as any}
											onClick={() => {
												cancelFavorites().then();
											}}
											size={"large"}></Avatar>
									</Tooltip>
								</>
							) : (
								<>
									<Tooltip title={"收藏"} placement={"bottom"}>
										<StarOutlined
											onClick={() => {
												setFavorites().then();
											}}
											className={styles.detail_link_btn}
										/>
									</Tooltip>
								</>
							)}
						</Flex>
					</ProCard>
				</div>
				<Comment auth={detail} />
			</Skeleton>
		</>
	);
};
export default observer(ShareDetail);
