/** @format */

import { Avatar, Button, message, Skeleton } from "antd";
import { DrawerForm, ProCard, ProForm, ProFormText } from "@ant-design/pro-components";
import React, { createContext, useContext, useEffect, useState } from "react";
import { EditOutlined, EllipsisOutlined, ReloadOutlined, SettingOutlined } from "@ant-design/icons";
import bucket from "../../../../assets/icons/bucket.svg";
import styles from "./index.module.less";
import { getAllQiniuBucket } from "@/api/oss/qiniu";

const DrawerContext = createContext<{
	drawerVisit: boolean;
	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
}>({} as any);
const UpDrawer = () => {
	const [drawerVisit, setDrawerVisit] = useState(false);
	return (
		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
			<ProCardComponent />
		</DrawerContext.Provider>
	);
};
const ProCardComponent = () => {
	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
	const [buckets, setBuckets] = useState<any>([]);
	const [loading, setLoading] = useState<boolean>(true);

	async function getAllBucket() {
		getAllQiniuBucket("1").then((res: any) => {
			if (res && res.success) {
				setBuckets(res.data);
				setLoading(false);
			}
		});
	}
	useEffect(() => {
		getAllBucket().then();
	}, []);

	const bucketList = () => {
		return (
			<ProCard
				title={"存储桶列表"}
				headerBordered
				extra={
					<>
						<Button
							type="default"
							shape={"circle"}
							style={{ marginRight: 20 }}
							onClick={() => {
								setLoading(false);
								getAllBucket().then();
							}}
							icon={<ReloadOutlined />}></Button>
						<Button type="primary" onClick={() => setDrawerVisit(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={<b>{item.name}</b>}
											style={{
												width: "180px",
												height: "150px",
												marginLeft: 10,
											}}
											actions={[
												<SettingOutlined key="setting" />,
												<EditOutlined key="edit" />,
												<EllipsisOutlined key="ellipsis" />,
											]}>
											<Avatar
												shape={"square"}
												src={bucket as any}
												size={"large"}
											/>
											<b style={{ marginLeft: 10 }}>{item.size}</b>
										</ProCard>
									</div>
								);
							})}
					</Skeleton>
				</div>
			</ProCard>
		);
	};

	return (
		<>
			{bucketList()}
			<DrawerForm
				title="创建存储桶"
				open={drawerVisit}
				onOpenChange={setDrawerVisit}
				onFinish={async (values) => {
					console.log(values.name);
					message.success("提交成功");
					return true;
				}}>
				<ProForm.Group>
					<ProFormText
						width="md"
						name="name"
						label="存储桶名字"
						tooltip="最长为 24 位"
						placeholder="请输入名称"
					/>

					<ProFormText
						width="md"
						name="capacity"
						label="我方公司名称"
						placeholder="请输入名称"
					/>
				</ProForm.Group>
			</DrawerForm>
		</>
	);
};

export default UpDrawer;
