/** @format */
import React from "react";
import { Avatar, Button, Card, Divider, Flex, Tag, Tooltip } from "antd";
import {
	CommentOutlined,
	ExportOutlined,
	EyeOutlined,
	HeartOutlined,
	InfoCircleOutlined,
	LeftOutlined,
	TagsOutlined,
	WarningOutlined,
} from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import "aieditor/dist/style.css";
import { ProCard } from "@ant-design/pro-components";
import styles from "./index.module.less";
import logo from "@/assets/icons/baiduyun.svg";
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";
const ShareDetail: React.FunctionComponent = () => {
	const navigate = useNavigate();
	return (
		<>
			<div>
				<ProCard bordered={true}>
					<Flex vertical={false} align={"center"} justify={"space-between"}>
						<Button
							shape="circle"
							icon={<LeftOutlined />}
							onClick={() => {
								navigate("/main/share/list/1");
							}}
						/>
						<Flex vertical={false} align={"center"}>
							<h3>办公软件分享</h3>
						</Flex>
						<Flex
							vertical={false}
							align={"center"}
							justify={"space-between"}
							style={{ width: "20%" }}>
							<Flex vertical={false} align={"center"}>
								<Avatar src={logo as any} size={"small"} />
								<span
									style={{
										fontSize: 12,
										color: "gray",
										overflow: "hidden",
									}}>
									landaiqing
								</span>
							</Flex>
							<Flex vertical={false} align={"center"}>
								<HeartOutlined />
								<span
									style={{
										fontSize: 12,
										color: "gray",
									}}>
									1024
								</span>
							</Flex>
							<Flex vertical={false} align={"center"}>
								<CommentOutlined />
								<span
									style={{
										fontSize: 12,
										color: "gray",
									}}>
									1024
								</span>
							</Flex>
							<Flex vertical={false} align={"center"}>
								<EyeOutlined style={{ color: "gray" }} />{" "}
								<span
									style={{
										fontSize: 12,
										color: "gray",
									}}>
									1024
								</span>
							</Flex>
						</Flex>
					</Flex>
				</ProCard>
				<div className={styles.share_detail_container}>
					<ProCard bordered={true}>
						<div style={{ height: 500 }}>资源描述</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 }}>Windows DefenderRemover</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={"space-between"}>
								<Card hoverable={true} style={{ width: 280, height: 140 }}>
									<Flex vertical={true}>
										<Flex
											vertical={false}
											justify={"space-between"}
											align={"center"}>
											<div>
												<Avatar src={logo as any}></Avatar>
												<span
													style={{
														marginLeft: 10,
														color: "#1677FF",
														fontSize: 16,
													}}>
													百度云
												</span>
											</div>
											<ExportOutlined className={styles.link_btn} />
										</Flex>
										<Divider></Divider>
										<Flex vertical={false}>
											<Tooltip
												title="DefenderRemove111111111"
												placement={"bottom"}>
												<span style={{ width: 150, overflowX: "hidden" }}>
													DefenderRemove111111111
												</span>
											</Tooltip>
											<span
												style={{
													width: 130,
													marginLeft: 10,
													display: "flex",
													flexDirection: "row",
												}}>
												<span style={{ color: "#1677FF" }}>密码：</span>{" "}
												<Paragraph copyable>12345</Paragraph>
											</span>
										</Flex>
									</Flex>
								</Card>
							</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 }}>
								<Tag bordered={false} color={getRandomColor()}>
									测试标签
								</Tag>
								<Tag bordered={false} color={getRandomColor()}>
									测试标签
								</Tag>
								<Tag bordered={false} color={getRandomColor()}>
									测试标签
								</Tag>
							</Flex>
						</Flex>
						<Flex vertical={false} align={"center"} justify={"center"} style={{height: 50}}>
							<Avatar className={styles.like_icon} src={like as any} size={"large"}></Avatar>
							<Avatar
								className={styles.favtorie_icon}
								src={favorite as any}
								size={"large"}></Avatar>
						</Flex>
					</ProCard>
				</div>
				<Comment />
			</div>
		</>
	);
};
export default ShareDetail;
