/** @format */
import { FunctionComponent, useEffect, 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,
	message,
	Skeleton,
	Tooltip,
} from "antd";

import { useNavigate } from "react-router-dom";
import TextArea from "antd/es/input/TextArea";
import { EyeOutlined, PlusOutlined, UnorderedListOutlined } from "@ant-design/icons";
import Meta from "antd/es/card/Meta";
import { addShareCircle, getShareCircleList } from "@/api/share";
import useStore from "@/utils/store/useStore.tsx";
import { observer } from "mobx-react";
const MainShare: FunctionComponent = observer(() => {
	const store = useStore("user");
	const userId: any = store.getUserId();
	const navigate = useNavigate();
	const [open, setOpen] = useState(false);
	const [loading, setLoading] = useState(true);
	const [circleList, setCircleList] = useState<any[]>([]);
	const [form] = Form.useForm();
	const onClose = () => {
		setOpen(false);
	};
	async function getShareCircles() {
		getShareCircleList().then((res: any) => {
			if (res && res.success && res.data) {
				setCircleList(res.data);
				setLoading(false);
			}
		});
	}

	useEffect(() => {
		getShareCircles().then();
	}, []);
	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"} wrap={true} justify={"flex-start"}>
						<Skeleton active={true} loading={loading} paragraph={{ rows: 10 }}>
							{circleList &&
								circleList.map((item: any, index: number) => {
									return (
										<div key={index}>
											<Card
												hoverable
												style={{
													width: "250px",
													boxShadow: " 0 0 10px rgba(0, 0, 0, 0.1)",
													borderRadius: 20,
													marginLeft: 30,
													marginTop: 20,
													// backgroundColor: "rgba(79,68,68,0.11)",
												}}
												onClick={() => {
													navigate("/main/share/list/" + item.id);
												}}
												cover={
													<Image
														alt="example"
														src={item.icon}
														style={{
															height: 180,
															borderTopLeftRadius: 20,
															borderTopRightRadius: 20,
															backgroundSize: "cover",
														}}
														preview={false}
														width={"100%"}
														height={"100%"}
														fallback="data:image/png;base64,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"
													/>
												}>
												<Meta
													title={item.name}
													description={
														<>
															<Tooltip title={item.description}>
																<span>{item.description}</span>
															</Tooltip>
														</>
													}
												/>
												<Flex
													vertical={false}
													style={{ marginTop: 10 }}
													align={"center"}
													justify={"space-between"}>
													<Flex vertical={false} align={"center"}>
														<Avatar
															src={item.avatar as any}
															size={"small"}
														/>{" "}
														<span
															style={{
																fontSize: 12,
																color: "gray",
																marginLeft: 5,
															}}>
															{item.nickName}
														</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,
																}}>
																{item.views}
															</span>
														</Flex>
														<Flex vertical={false} align={"center"}>
															<UnorderedListOutlined
																style={{ color: "gray" }}
															/>{" "}
															<span
																style={{
																	fontSize: 12,
																	color: "gray",
																	marginLeft: 5,
																}}>
																{item.count}
															</span>
														</Flex>
													</Flex>
												</Flex>
											</Card>
										</div>
									);
								})}
						</Skeleton>
					</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={form}
					onFinish={(values: any) => {
						const formData: any = {
							userId: userId,
							...values,
						};
						addShareCircle(formData).then((res: any) => {
							if (res && res.success && res.data) {
								message
									.open({
										content: "创建成功",
										type: "success",
									})
									.then();
								setOpen(false);
								getShareCircles().then();
								form.resetFields();
							} else {
								message
									.open({
										content: res.data,
										type: "error",
									})
									.then();
							}
						});
					}}>
					<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.Item
						style={{
							display: "flex",
							flexDirection: "row",
							justifyContent: "flex-end",
						}}>
						<Button type="primary" htmlType="submit">
							提交
						</Button>
					</Form.Item>
				</Form>
			</Drawer>
			<FloatButton
				type={"primary"}
				style={{ right: "5%", width: 50, height: 50 }}
				icon={<PlusOutlined />}
				onClick={() => setOpen(true)}
			/>
		</>
	);
});
export default MainShare;