/** @format */
import { ProCard } from "@ant-design/pro-components";
import { Avatar, Button, Empty, Flex, Input, message, Segmented, Skeleton, Tag } from "antd";
import logo from "@/assets/icons/gitee.svg";
import {
	BarsOutlined,
	CloseOutlined,
	CommentOutlined,
	CrownOutlined,
	FireOutlined,
	LikeFilled,
	LikeOutlined,
	PictureOutlined,
	SendOutlined,
	SmileOutlined,
} from "@ant-design/icons";
import { useEffect, useState } from "react";
import styles from "./index.module.less";
import { useParams } from "react-router-dom";
import {
	addComment,
	addLikeComment,
	addReply,
	deletedLikeComment,
	listComment,
	listCommentHot,
	listReply,
	returnAllCommentAndReplyCount,
} from "@/api/share";
import useStore from "@/utils/store/useStore.tsx";
import { observer } from "mobx-react";
const Comment = observer((props: any) => {
	const params = useParams();
	const [isReply, setIsReply] = useState<any>(null);
	const [isReplyReply, setIsReplyReply] = useState<any>(null);
	const [loading, setLoading] = useState<boolean>(true);
	const [isReplyComment, setIsReplyComment] = useState<any>(null);
	const [comment, setComment] = useState<any[]>([]);
	const [reply, setReply] = useState<any[]>([]);
	const [commentData, setCommentData] = useState<any>("");
	const [replyData, setReplyData] = useState<any>("");
	const [replyReplyData, setReplyReplyData] = useState<any>("");
	const [count, setCount] = useState<any>(0);
	const userStore = useStore("user");
	const userId: any = userStore.getUserId();
	async function listComments() {
		setComment([]);
		listComment(params.id, userId).then((res: any) => {
			if (res && res.success && res.data) {
				setComment(res.data);
				setLoading(false);
			}
		});
	}
	async function addLike(commentId: any) {
		setComment([]);
		const data: any = {
			detailId: params.id,
			userId: userId,
			commentId: commentId,
		};
		addLikeComment(data).then();
		listComments().then();
	}
	async function delLike(commentId: any) {
		setComment([]);
		const data: any = {
			detailId: params.id,
			userId: userId,
			commentId: commentId,
		};
		deletedLikeComment(data).then();
		listComments().then();
	}
	async function getCommentHot() {
		setComment([]);
		listCommentHot(params.id, userId).then((res: any) => {
			if (res && res.success && res.data) {
				setComment(res.data);
				setLoading(false);
			}
		});
	}
	async function getAllCommentAndReply(detailId: any) {
		returnAllCommentAndReplyCount(detailId).then((res: any) => {
			if (res && res.success && res.data) {
				setCount(res.data);
			}
		});
	}
	async function addComments(data: any) {
		addComment(data).then((res: any) => {
			if (res && res.success) {
				message.open({
					content: "评论成功",
					type: "success",
				});
				listComments().then();
			} else {
				message.open({
					content: "评论失败",
					type: "error",
				});
			}
		});
	}
	async function replyComment(commentId: any) {
		listReply(commentId, userId).then((res: any) => {
			if (res && res.success && res.data) {
				setReply(res.data);
			}
		});
	}
	async function addReplies(data: any) {
		addReply(data).then((res: any) => {
			if (res && res.success) {
				message.open({
					content: "回复成功",
					type: "success",
				});
				listComments().then();
			} else {
				message.open({
					content: "回复失败",
					type: "error",
				});
			}
		});
	}
	const handleExpandClick = (index: any) => {
		setIsReply(isReply === index ? null : index);
	};
	const handleExpandReplyReplyClick = (index: any) => {
		setIsReplyReply(isReplyReply === index ? null : index);
	};
	const handleExpandReplyCommentClick = (index: any) => {
		setIsReplyComment(isReplyComment === index ? null : index);
	};
	useEffect(() => {
		getCommentHot().then();
		getAllCommentAndReply(params.id).then();
	}, []);
	return (
		<>
			<div>
				<ProCard title={"评论 " + count}>
					<Skeleton active={true} loading={loading} paragraph={{ rows: 2 }}>
						<Flex vertical={false}>
							<Flex vertical={true} justify={"flex-start"}>
								<Avatar src={logo as any} size={"large"} />
							</Flex>
							<Flex vertical={true} style={{ width: "100%" }}>
								<Input.TextArea
									style={{ marginLeft: 10 }}
									rows={5}
									maxLength={500}
									onChange={(e: any) => {
										setCommentData(e.target.value);
									}}
									showCount
									placeholder={"平等表达，友善交流"}></Input.TextArea>
								<Flex
									vertical={false}
									align={"center"}
									style={{ marginTop: 10, marginLeft: 10 }}>
									<SmileOutlined style={{ fontSize: 20, color: "grey" }} />
									<PictureOutlined
										style={{ marginLeft: 20, fontSize: 20, color: "grey" }}
									/>
								</Flex>
								<Flex vertical={false} align={"center"} justify={"flex-end"}>
									<Button
										icon={<SendOutlined />}
										type={"primary"}
										onClick={() => {
											const data: any = {
												userId: userId,
												detailId: params.id,
												content: commentData,
											};
											addComments(data).then(() => {
												listComments().then();
											});
										}}>
										发表
									</Button>
								</Flex>
							</Flex>
						</Flex>

						<Flex vertical={true}>
							<Segmented
								block={false}
								style={{ width: 145 }}
								size={"middle"}
								defaultValue={"hot"}
								onChange={(value: any) => {
									if (value === "hot") {
										getCommentHot().then();
									}

									if (value === "new") {
										listComments().then();
									}
								}}
								options={[
									{
										label: "最热",
										value: "hot",
										icon: <FireOutlined />,
									},
									{
										label: "最新",
										value: "new",
										icon: <BarsOutlined />,
									},
								]}
							/>
							{comment.length === 0 ? (
								<Empty description={"暂无评论！"} />
							) : (
								<>
									{comment &&
										Array.from(comment).map((item: any, index: number) => {
											return (
												<Flex
													key={index}
													vertical={true}
													style={{ marginTop: 20, width: "100%" }}>
													<Flex vertical={false}>
														<Flex
															vertical={true}
															justify={"flex-start"}>
															<Avatar
																src={item.avatar as any}
																size={"large"}></Avatar>
														</Flex>
														<Flex
															vertical={true}
															style={{
																marginLeft: 15,
																width: "100%",
															}}>
															<Flex vertical={false} align={"center"}>
																<span
																	style={{
																		fontSize: 16,
																		fontWeight: 500,
																	}}>
																	{item.nick}
																</span>
																{props.auth.userId ==
																item.userId ? (
																	<Tag
																		bordered={false}
																		icon={<CrownOutlined />}
																		color={"cyan"}
																		style={{ marginLeft: 5 }}>
																		作者
																	</Tag>
																) : null}
															</Flex>
															<ProCard
																bordered={true}
																boxShadow={false}
																extra={<></>}
																style={{ width: "100%" }}>
																<span>{item.content}</span>
																<Flex
																	vertical={false}
																	align={"center"}
																	justify={"space-between"}>
																	<Flex
																		vertical={false}
																		align={"center"}
																		style={{
																			marginTop: 10,
																			width: "100%",
																		}}>
																		<span
																			style={{
																				fontSize: 13,
																				color: "grey",
																			}}>
																			{item.createdTime}
																		</span>
																		<Flex
																			vertical={false}
																			align={"center"}>
																			{item.isLike ===
																			true ? (
																				<LikeFilled
																					onClick={() => {
																						delLike(
																							item.id,
																						).then();
																					}}
																					style={{
																						color: "red",
																					}}
																				/>
																			) : (
																				<LikeOutlined
																					className={
																						styles.like_icon
																					}
																					onClick={() => {
																						addLike(
																							item.id,
																						).then();
																					}}
																				/>
																			)}
																			<span
																				style={{
																					fontSize: 13,
																					color: "grey",
																				}}>
																				{item.likes}
																			</span>
																		</Flex>
																		<Flex
																			vertical={false}
																			align={"center"}>
																			<CommentOutlined
																				onClick={() => {
																					setReply([]);
																					if (item.id) {
																						replyComment(
																							item.id,
																						).then(
																							() => {
																								handleExpandReplyCommentClick(
																									index,
																								);
																							},
																						);
																					}
																				}}
																				className={
																					styles.comment_icon
																				}
																			/>
																			<span
																				style={{
																					fontSize: 13,
																					color: "grey",
																				}}>
																				{item.replyCount}
																			</span>
																		</Flex>
																		<Flex
																			vertical={false}
																			align={"center"}>
																			<Button
																				type="text"
																				size={"small"}
																				onClick={() => {
																					handleExpandClick(
																						index,
																					);
																				}}
																				style={{
																					fontSize: 13,
																					color: "grey",
																				}}>
																				回复
																			</Button>
																		</Flex>
																	</Flex>
																	<Flex
																		vertical={false}
																		align={"center"}>
																		<span
																			style={{
																				textWrap: "nowrap",
																				fontSize: 12,
																				color: "grey",
																				textAlign: "end",
																			}}>
																			{item.location ||
																				"unknown"}
																		</span>
																		<span
																			style={{
																				marginLeft: 10,
																				fontSize: 13,
																				color: "grey",
																			}}>
																			{item.browser ||
																				"unknown"}
																		</span>
																		<span
																			style={{
																				marginLeft: 10,
																				fontSize: 13,
																				color: "grey",
																			}}>
																			{item.browserVersion ||
																				"unknown"}
																		</span>
																	</Flex>
																</Flex>
															</ProCard>
															{isReply === index && (
																<Flex vertical={true}>
																	<Flex
																		vertical={false}
																		align={"center"}>
																		<span
																			style={{
																				fontSize: 13,
																			}}>
																			回复：
																		</span>
																		<span
																			style={{
																				fontSize: 13,
																			}}>
																			{item.nick}
																		</span>
																		<Button
																			icon={<CloseOutlined />}
																			style={{
																				fontSize: 13,
																				marginLeft: 5,
																			}}
																			type={"dashed"}
																			onClick={() => {
																				setIsReply(null);
																			}}
																			size={"small"}>
																			取消回复
																		</Button>
																	</Flex>
																	<Flex
																		vertical={false}
																		style={{ marginTop: 5 }}>
																		<Flex
																			vertical={true}
																			justify={"flex-start"}>
																			<Avatar
																				src={logo as any}
																				size={"default"}
																			/>
																		</Flex>
																		<Flex
																			vertical={true}
																			style={{
																				width: "100%",
																			}}>
																			<Input.TextArea
																				style={{
																					marginLeft: 10,
																					width: "100%",
																				}}
																				rows={3}
																				maxLength={500}
																				showCount
																				onChange={(e) => {
																					setReplyData(
																						e.target
																							.value,
																					);
																				}}
																				placeholder={
																					"平等表达，友善交流"
																				}></Input.TextArea>
																			<Flex
																				vertical={false}
																				align={"center"}
																				style={{
																					marginTop: 10,
																					marginLeft: 10,
																				}}>
																				<SmileOutlined
																					style={{
																						fontSize: 20,
																						color: "grey",
																					}}
																				/>
																				<PictureOutlined
																					style={{
																						marginLeft: 20,
																						fontSize: 20,
																						color: "grey",
																					}}
																				/>
																			</Flex>
																			<Flex
																				vertical={false}
																				align={"center"}
																				justify={
																					"flex-end"
																				}>
																				<Button
																					onClick={() => {
																						const data: any =
																							{
																								userId: userId,
																								detailId:
																									params.id,
																								content:
																									replyData,
																								toId: item.id,
																								replyId:
																									item.id,
																							};
																						addReplies(
																							data,
																						).then();
																					}}
																					icon={
																						<SendOutlined />
																					}
																					type={
																						"primary"
																					}>
																					发表
																				</Button>
																			</Flex>
																		</Flex>
																	</Flex>
																</Flex>
															)}
															{isReplyComment === index &&
																reply &&
																Array.from(reply).map(
																	(
																		replyItem: any,
																		replyIndex: number,
																	) => {
																		return (
																			<Flex
																				key={replyIndex}
																				vertical={false}>
																				<Flex
																					vertical={true}
																					justify={
																						"flex-start"
																					}>
																					<Avatar
																						src={
																							replyItem.avatar as any
																						}
																						size={
																							"default"
																						}></Avatar>
																				</Flex>
																				<Flex
																					vertical={true}
																					style={{
																						marginLeft: 15,
																						width: "100%",
																					}}>
																					<Flex
																						vertical={
																							false
																						}
																						align={
																							"center"
																						}>
																						<span
																							style={{
																								fontSize: 14,
																								fontWeight: 500,
																							}}>
																							{
																								replyItem.nick
																							}{" "}
																							回复
																							{
																								replyItem.nickto
																							}
																						</span>
																						{props.auth
																							.userId ==
																						replyItem.userId ? (
																							<Tag
																								bordered={
																									false
																								}
																								icon={
																									<CrownOutlined />
																								}
																								color={
																									"cyan"
																								}
																								style={{
																									marginLeft: 5,
																								}}>
																								作者
																							</Tag>
																						) : null}
																					</Flex>
																					<ProCard
																						bordered={
																							true
																						}
																						boxShadow={
																							false
																						}
																						extra={
																							<></>
																						}
																						style={{
																							width: "100%",
																						}}>
																						<span>
																							{
																								replyItem.content
																							}
																						</span>
																						<Flex
																							vertical={
																								false
																							}
																							align={
																								"center"
																							}
																							justify={
																								"space-between"
																							}>
																							<Flex
																								vertical={
																									false
																								}
																								style={{
																									marginTop: 10,
																									width: "100%",
																								}}>
																								<span
																									style={{
																										fontSize: 13,
																										color: "grey",
																									}}>
																									{
																										replyItem.createdTime
																									}
																								</span>
																								<Flex
																									vertical={
																										false
																									}
																									align={
																										"center"
																									}>
																									{replyItem.isLike ===
																									false ? (
																										<LikeOutlined
																											onClick={() => {
																												addLike(
																													replyItem.id,
																												).then();
																											}}
																											className={
																												styles.like_icon
																											}
																										/>
																									) : (
																										<LikeFilled
																											className={
																												styles.like_icon
																											}
																											style={{
																												color: "red",
																											}}
																											onClick={() => {
																												delLike(
																													replyItem.id,
																												).then();
																											}}
																										/>
																									)}
																									<span
																										style={{
																											fontSize: 13,
																											color: "grey",
																										}}>
																										{
																											replyItem.likes
																										}
																									</span>
																								</Flex>
																								<Flex
																									vertical={
																										false
																									}
																									align={
																										"center"
																									}>
																									<Button
																										type="text"
																										size={
																											"small"
																										}
																										onClick={() => {
																											handleExpandReplyReplyClick(
																												replyItem.id,
																											);
																										}}
																										style={{
																											fontSize: 13,
																											color: "grey",
																										}}>
																										回复
																									</Button>
																								</Flex>
																							</Flex>
																							<Flex
																								vertical={
																									false
																								}
																								align={
																									"center"
																								}>
																								<span
																									style={{
																										textWrap:
																											"nowrap",
																										fontSize: 12,
																										color: "grey",
																										textAlign:
																											"end",
																									}}>
																									{replyItem.location ||
																										"unknown"}
																								</span>
																								<span
																									style={{
																										marginLeft: 10,
																										fontSize: 13,
																										color: "grey",
																									}}>
																									{replyItem.browser ||
																										"unknown"}
																								</span>
																								<span
																									style={{
																										marginLeft: 10,
																										fontSize: 13,
																										color: "grey",
																									}}>
																									{replyItem.browserVersion ||
																										"unknown"}
																								</span>
																							</Flex>
																						</Flex>
																					</ProCard>
																					{isReplyReply ===
																						replyItem.id && (
																						<>
																							<Flex
																								vertical={
																									true
																								}>
																								<Flex
																									vertical={
																										false
																									}
																									align={
																										"center"
																									}>
																									<span
																										style={{
																											fontSize: 13,
																										}}>
																										回复：
																									</span>
																									<span
																										style={{
																											fontSize: 13,
																										}}>
																										{
																											replyItem.nick
																										}
																									</span>
																									<Button
																										icon={
																											<CloseOutlined />
																										}
																										style={{
																											fontSize: 13,
																											marginLeft: 5,
																										}}
																										type={
																											"dashed"
																										}
																										onClick={() => {
																											setIsReplyReply(
																												null,
																											);
																										}}
																										size={
																											"small"
																										}>
																										取消回复
																									</Button>
																								</Flex>
																								<Flex
																									vertical={
																										false
																									}
																									style={{
																										marginTop: 5,
																									}}>
																									<Flex
																										vertical={
																											true
																										}
																										justify={
																											"flex-start"
																										}>
																										<Avatar
																											src={
																												logo as any
																											}
																											size={
																												"default"
																											}
																										/>
																									</Flex>
																									<Flex
																										vertical={
																											true
																										}
																										style={{
																											width: "100%",
																										}}>
																										<Input.TextArea
																											style={{
																												marginLeft: 10,
																												width: "100%",
																											}}
																											rows={
																												3
																											}
																											onChange={(
																												e: any,
																											) => {
																												setReplyReplyData(
																													e
																														.target
																														.value,
																												);
																											}}
																											maxLength={
																												500
																											}
																											showCount
																											placeholder={
																												"平等表达，友善交流"
																											}></Input.TextArea>
																										<Flex
																											vertical={
																												false
																											}
																											align={
																												"center"
																											}
																											style={{
																												marginTop: 10,
																												marginLeft: 10,
																											}}>
																											<SmileOutlined
																												style={{
																													fontSize: 20,
																													color: "grey",
																												}}
																											/>
																											<PictureOutlined
																												style={{
																													marginLeft: 20,
																													fontSize: 20,
																													color: "grey",
																												}}
																											/>
																										</Flex>
																										<Flex
																											vertical={
																												false
																											}
																											align={
																												"center"
																											}
																											justify={
																												"flex-end"
																											}>
																											<Button
																												onClick={() => {
																													const data: any =
																														{
																															userId: userId,
																															detailId:
																																params.id,
																															content:
																																replyReplyData,
																															toId: item.id,
																															replyId:
																																replyItem.id,
																														};
																													addReplies(
																														data,
																													).then();
																												}}
																												icon={
																													<SendOutlined />
																												}
																												type={
																													"primary"
																												}>
																												发表
																											</Button>
																										</Flex>
																									</Flex>
																								</Flex>
																							</Flex>
																						</>
																					)}
																				</Flex>
																			</Flex>
																		);
																	},
																)}
														</Flex>
													</Flex>
												</Flex>
											);
										})}
								</>
							)}
						</Flex>
					</Skeleton>
				</ProCard>
			</div>
		</>
	);
});
export default Comment;
