/** @format */
import { ProCard } from "@ant-design/pro-components";
import { Avatar, Button, Flex, Input, Segmented, Tag } from "antd";
import logo from "@/assets/icons/gitee.svg";
import {
	BarsOutlined,
	CloseOutlined,
	CommentOutlined,
	CrownOutlined,
	FireOutlined,
	LikeOutlined,
	PictureOutlined,
	SendOutlined,
	SmileOutlined,
} from "@ant-design/icons";
import { useState } from "react";
import styles from "./index.module.less";
const Comment = () => {
	const [isReply, setIsReply] = useState<boolean>(false);
	const [isReplyComment, setIsReplyComment] = useState<boolean>(false);
	return (
		<>
			<div>
				<ProCard title={"评论 5"}>
					<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}
								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"}>
									发表
								</Button>
							</Flex>
						</Flex>
					</Flex>
					<Flex vertical={true}>
						<Segmented
							block={false}
							style={{ width: 145 }}
							size={"middle"}
							options={[
								{ label: "最新", value: "List", icon: <BarsOutlined /> },
								{ label: "最热", value: "Kanban", icon: <FireOutlined /> },
							]}
						/>
						<Flex vertical={true} style={{ marginTop: 20, width: "100%" }}>
							<Flex vertical={false}>
								<Flex vertical={true} justify={"flex-start"}>
									<Avatar src={logo 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 }}>
											landaiqing
										</span>
										<Tag
											bordered={false}
											icon={<CrownOutlined />}
											color={"cyan"}
											style={{ marginLeft: 5 }}>
											作者
										</Tag>
									</Flex>
									<ProCard
										bordered={true}
										boxShadow={false}
										extra={<></>}
										style={{ width: "100%" }}>
										<span>
											i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是
										</span>
										<Flex
											vertical={false}
											style={{ marginTop: 10, width: "100%" }}>
											<span style={{ fontSize: 13, color: "grey" }}>
												1 小时前
											</span>
											<Flex vertical={false} align={"center"}>
												<LikeOutlined className={styles.like_icon} />
												<span style={{ fontSize: 13, color: "grey" }}>
													10
												</span>
											</Flex>
											<Flex vertical={false} align={"center"}>
												<CommentOutlined className={styles.comment_icon} />
												<span style={{ fontSize: 13, color: "grey" }}>
													10
												</span>
											</Flex>
											<Flex vertical={false} align={"center"}>
												<Button
													type="text"
													size={"small"}
													onClick={() => setIsReply(true)}
													style={{ fontSize: 13, color: "grey" }}>
													回复
												</Button>
											</Flex>
										</Flex>
									</ProCard>
									{isReply && (
										<>
											<Flex vertical={true}>
												<Flex vertical={false} align={"center"}>
													<span style={{ fontSize: 13 }}> 回复： </span>
													<span style={{ fontSize: 13 }}>
														{" "}
														landaiqing
													</span>
													<Button
														icon={<CloseOutlined />}
														style={{ fontSize: 13, marginLeft: 5 }}
														type={"dashed"}
														onClick={() => setIsReply(false)}
														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
															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"}>
																发表
															</Button>
														</Flex>
													</Flex>
												</Flex>
											</Flex>
										</>
									)}
									<Flex vertical={false}>
										<Flex vertical={true} justify={"flex-start"}>
											<Avatar src={logo 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 }}>
													sjm 回复 landaiqing
												</span>
												{/*<Tag*/}
												{/*	bordered={false}*/}
												{/*	icon={<CrownOutlined />}*/}
												{/*	color={"cyan"}*/}
												{/*	style={{ marginLeft: 5 }}>*/}
												{/*	作者*/}
												{/*</Tag>*/}
											</Flex>
											<ProCard
												bordered={true}
												boxShadow={false}
												extra={<></>}
												style={{ width: "100%" }}>
												<span>
													i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是
												</span>
												<Flex
													vertical={false}
													style={{ marginTop: 10, width: "100%" }}>
													<span style={{ fontSize: 13, color: "grey" }}>
														1 小时前
													</span>
													<Flex vertical={false} align={"center"}>
														<LikeOutlined
															style={{
																fontSize: 13,
																color: "grey",
																marginLeft: 10,
															}}
														/>
														<span
															style={{ fontSize: 13, color: "grey" }}>
															10
														</span>
													</Flex>
													<Flex vertical={false} align={"center"}>
														<CommentOutlined
															style={{
																fontSize: 13,
																color: "grey",
																marginLeft: 10,
															}}
														/>
														<span
															style={{ fontSize: 13, color: "grey" }}>
															10
														</span>
													</Flex>
													<Flex vertical={false} align={"center"}>
														<Button
															type="text"
															size={"small"}
															onClick={() => setIsReplyComment(true)}
															style={{ fontSize: 13, color: "grey" }}>
															回复
														</Button>
													</Flex>
												</Flex>
											</ProCard>
											{isReplyComment && (
												<>
													<Flex vertical={true}>
														<Flex vertical={false} align={"center"}>
															<span style={{ fontSize: 13 }}>
																{" "}
																回复：{" "}
															</span>
															<span style={{ fontSize: 13 }}>
																{" "}
																landaiqing
															</span>
															<Button
																icon={<CloseOutlined />}
																style={{
																	fontSize: 13,
																	marginLeft: 5,
																}}
																type={"dashed"}
																onClick={() =>
																	setIsReplyComment(false)
																}
																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
																	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"}>
																		发表
																	</Button>
																</Flex>
															</Flex>
														</Flex>
													</Flex>
												</>
											)}
										</Flex>
									</Flex>
									<Flex vertical={false}>
										<Flex vertical={true} justify={"flex-start"}>
											<Avatar src={logo 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 }}>
													sjm 回复 landaiqing
												</span>
												{/*<Tag*/}
												{/*	bordered={false}*/}
												{/*	icon={<CrownOutlined />}*/}
												{/*	color={"cyan"}*/}
												{/*	style={{ marginLeft: 5 }}>*/}
												{/*	作者*/}
												{/*</Tag>*/}
											</Flex>
											<ProCard
												bordered={true}
												boxShadow={false}
												extra={<></>}
												style={{ width: "100%" }}>
												<span>
													i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是
												</span>
												<Flex
													vertical={false}
													style={{ marginTop: 10, width: "100%" }}>
													<span style={{ fontSize: 13, color: "grey" }}>
														1 小时前
													</span>
													<Flex vertical={false} align={"center"}>
														<LikeOutlined
															style={{
																fontSize: 13,
																color: "grey",
																marginLeft: 10,
															}}
														/>
														<span
															style={{ fontSize: 13, color: "grey" }}>
															10
														</span>
													</Flex>
													<Flex vertical={false} align={"center"}>
														<CommentOutlined
															style={{
																fontSize: 13,
																color: "grey",
																marginLeft: 10,
															}}
														/>
														<span
															style={{ fontSize: 13, color: "grey" }}>
															10
														</span>
													</Flex>
													<Flex vertical={false} align={"center"}>
														<Button
															type="text"
															size={"small"}
															onClick={() => setIsReplyComment(true)}
															style={{ fontSize: 13, color: "grey" }}>
															回复
														</Button>
													</Flex>
												</Flex>
											</ProCard>
											{isReplyComment && (
												<>
													<Flex vertical={true}>
														<Flex vertical={false} align={"center"}>
															<span style={{ fontSize: 13 }}>
																{" "}
																回复：{" "}
															</span>
															<span style={{ fontSize: 13 }}>
																{" "}
																landaiqing
															</span>
															<Button
																icon={<CloseOutlined />}
																style={{
																	fontSize: 13,
																	marginLeft: 5,
																}}
																type={"dashed"}
																onClick={() =>
																	setIsReplyComment(false)
																}
																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
																	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"}>
																		发表
																	</Button>
																</Flex>
															</Flex>
														</Flex>
													</Flex>
												</>
											)}
										</Flex>
									</Flex>
								</Flex>
							</Flex>
						</Flex>
					</Flex>
				</ProCard>
			</div>
		</>
	);
};
export default Comment;
