/** @format */

import { Avatar, Button, Form, Input, message, Modal, Popconfirm, Popover, Skeleton } from "antd";
import { ProCard } from "@ant-design/pro-components";
import { useEffect, useState } from "react";
import { ClusterOutlined, DeleteOutlined, ReloadOutlined } from "@ant-design/icons";
import bucket from "@/assets/icons/bucket.svg";
import styles from "./index.module.less";
import { getAllMinioBucket } from "@/api/oss/minio";
import { creatBucket, deleteBucket, getBucketSize } from "@/api/oss";
import { observer } from "mobx-react";
import useStore from "@/utils/store/useStore.tsx";

const MinioDrawer = observer(() => {
	const [buckets, setBuckets] = useState<any>([]);
	const [loading, setLoading] = useState<boolean>(true);
	const [bucketSize, setBucketSize] = useState<string>("");
	const [form] = Form.useForm();
	const [open, setOpen] = useState<boolean>(false);
	const userStore = useStore("user");
	const userId: any = userStore.getUserId();
	async function getAllBucket() {
		getAllMinioBucket(userId).then((res: any) => {
			if (res && res.success) {
				setBuckets(res.data);
				setLoading(false);
			}
		});
	}
	useEffect(() => {
		getAllBucket().then();
	}, []);

	const bucketList = () => {
		return (
			<ProCard
				title={"MinIO存储桶列表"}
				headerBordered
				extra={
					<>
						<Button
							type="default"
							shape={"circle"}
							style={{ marginRight: 20 }}
							onClick={() => {
								setLoading(false);
								getAllBucket().then();
							}}
							icon={<ReloadOutlined />}></Button>
						<Button type="primary" onClick={() => setOpen(true)}>
							创建存储桶
						</Button>
					</>
				}>
				<div className={styles.div_proCard}>
					<Skeleton loading={loading} paragraph={{ rows: 13 }} active>
						{buckets &&
							Array.from(buckets).map((item: any, index: number) => {
								return (
									<div key={index}>
										<ProCard
											headStyle={{ backgroundColor: "#f0f2f5" }}
											hoverable
											bordered
											// title={}
											style={{
												width: "200px",
												marginLeft: 20,
											}}
											actions={[
												// eslint-disable-next-line react/jsx-key
												<Popover
													content={bucketSize}
													title={`size:`}
													trigger="click">
													<ClusterOutlined
														key={"calculate"}
														onClick={() => {
															getBucketSize(
																userId,
																item.name,
																"minio",
															).then((res: any) => {
																if (
																	res &&
																	res.success &&
																	res.data
																) {
																	setBucketSize(res.data);
																} else {
																	message
																		.open({
																			content: "计算出错！",
																			type: "error",
																		})
																		.then();
																}
															});
														}}
													/>
												</Popover>,
												// eslint-disable-next-line react/jsx-key
												<Popconfirm
													title={`删除存储桶：${item.name}`}
													description="你知道你要做什么吗？"
													onConfirm={() => {
														deleteBucket(
															userId,
															item.name,
															"minio",
														).then((res: any) => {
															if (
																res &&
																res.data &&
																res.data === "success"
															) {
																message
																	.open({
																		content: "删除成功！",
																		type: "success",
																	})
																	.then();
															} else {
																message
																	.open({
																		content: res.data,
																		type: "error",
																	})
																	.then();
															}
														});
													}}
													okText="Yes"
													cancelText="No">
													<DeleteOutlined key="delete" />
												</Popconfirm>,
											]}>
											<Avatar
												shape={"square"}
												src={bucket as any}
												size={"large"}
											/>
											<b style={{ marginLeft: 5 }}>{item.name}</b>
										</ProCard>
									</div>
								);
							})}
					</Skeleton>
				</div>
			</ProCard>
		);
	};

	return (
		<>
			{bucketList()}
			<Modal
				title="创建存储桶"
				width={"30%"}
				open={open}
				closable={true}
				onOk={() => {
					const bucketName = form.getFieldValue("name" as any);
					if (bucketName === "" || bucketName === null) {
						message.open({
							content: " 请输入存储桶名称！",
							type: "warning",
						});
					} else {
						creatBucket(userId, bucketName, "minio").then((res: any) => {
							if (res && res.success) {
								message
									.open({
										content: "创建成功！",
										type: "success",
									})
									.then();
								setOpen(false);
							} else {
								message
									.open({
										content: res.data,
										type: "error",
									})
									.then();
							}
						});
					}
				}}
				onCancel={() => setOpen(false)}>
				<Form layout="vertical" form={form}>
					<Form.Item
						name="name"
						label="存储桶名称"
						rules={[{ required: true, message: "请输入存储桶名称！" }]}>
						<Input placeholder="请输入存储桶名称！" />
					</Form.Item>
				</Form>
			</Modal>
		</>
	);
});

export default MinioDrawer;
