/** @format */
import { FunctionComponent, useState } from "react";
import { ProCard } from "@ant-design/pro-components";
import styles from "./index.module.less";
import { Avatar, Button, Card, Drawer, Flex, FloatButton, Form, Image, Input, Space } from "antd";

import { useNavigate } from "react-router-dom";
import TextArea from "antd/es/input/TextArea";
import { EyeOutlined, PlusOutlined, UnorderedListOutlined } from "@ant-design/icons";
import pic from "@/assets/images/background.png";

import Meta from "antd/es/card/Meta";
const MainShare: FunctionComponent = () => {
	const navigate = useNavigate();
	const [open, setOpen] = useState(false);

	const onClose = () => {
		setOpen(false);
	};
	return (
		<>
			<div className={styles.share_main}>
				<ProCard bordered={false} boxShadow={false}>
					<div className={styles.share_header}>
						<Input
							size={"large"}
							placeholder="搜索圈子"
							style={{ width: 500, borderRadius: 20 }}
						/>
					</div>
				</ProCard>
				<ProCard title={<h3>文件分享圈</h3>} bordered={false} boxShadow={false}>
					<Flex vertical={false} align={"center"}>
						<Card
							hoverable
							style={{
								width: "250px",
								boxShadow: " 0 0 10px rgba(0, 0, 0, 0.1)",
								borderRadius: 20,
								// backgroundColor: "rgba(79,68,68,0.11)",
							}}
							onClick={() => {
								navigate("/main/share/list/1");
							}}
							cover={
								<Image
									alt="example"
									src={pic as any}
									style={{
										height: 180,
										borderTopLeftRadius: 20,
										borderTopRightRadius: 20,
									}}
									preview={false}
									width={"100%"}
									fallback="data:image/png;base64,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"
								/>
							}>
							<Meta title="工具软件分享" description="分享一些常用的办公软件" />
							{/*<Avatar*/}
							{/*	src={pic2 as any}*/}
							{/*	shape={"circle"}*/}
							{/*	style={{*/}
							{/*		position: "absolute",*/}
							{/*		top: 160,*/}
							{/*		left: 10,*/}
							{/*		width: 60,*/}
							{/*		height: 60,*/}
							{/*		zIndex: 9999,*/}
							{/*	}}></Avatar>*/}
							<Flex
								vertical={false}
								style={{ marginTop: 10 }}
								align={"center"}
								justify={"space-between"}>
								<Flex vertical={false} align={"center"}>
									<Avatar src={pic as any} size={"small"} />{" "}
									<span style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
										landaiqing
									</span>
								</Flex>
								<Flex
									vertical={false}
									align={"center"}
									style={{ width: 100 }}
									justify={"space-between"}>
									<Flex vertical={false} align={"center"}>
										<EyeOutlined style={{ color: "gray" }} />{" "}
										<span
											style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
											1024
										</span>
									</Flex>
									<Flex vertical={false} align={"center"}>
										<UnorderedListOutlined style={{ color: "gray" }} />{" "}
										<span
											style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
											999
										</span>
									</Flex>
								</Flex>
							</Flex>
						</Card>
					</Flex>
				</ProCard>
			</div>
			<Drawer
				title="创建圈子"
				width={"40%"}
				onClose={onClose}
				open={open}
				styles={{
					body: {
						paddingBottom: 80,
					},
				}}
				extra={
					<Space>
						<Button onClick={onClose}>取消</Button>
						<Button onClick={onClose} type="primary">
							提交
						</Button>
					</Space>
				}>
				<Form layout="vertical">
					<Form.Item
						name="name"
						label="名称"
						rules={[{ required: true, message: "请输入圈子名称！" }]}>
						<Input maxLength={30} showCount placeholder="请输入圈子名称！" />
					</Form.Item>

					<Form.Item
						name="icon"
						label="图标"
						rules={[{ required: true, message: "请输入图标!" }]}>
						<Input placeholder="请输入图标！" />
					</Form.Item>

					<Form.Item
						name="description"
						label="描述"
						rules={[{ required: true, message: "请输入描述!" }]}>
						<TextArea rows={4} maxLength={50} showCount placeholder="请输入描述！" />
					</Form.Item>
				</Form>
			</Drawer>
			<FloatButton
				type={"primary"}
				style={{ right: "5%", width: 50, height: 50 }}
				icon={<PlusOutlined />}
				onClick={() => setOpen(true)}
			/>
		</>
	);
};
export default MainShare;
