/** @format */

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

const DrawerContext = createContext<{
	drawerVisit: boolean;
	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
}>({} as any);
const WangyiDrawer = () => {
	const [drawerVisit, setDrawerVisit] = useState(false);
	return (
		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
			<ProCardComponent />
		</DrawerContext.Provider>
	);
};
const ProCardComponent = () => {
	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
	const list = [
		"test1",
		"test2",
		"test3",
		"test1",
		"test2",
		"test3",
		"test1",
		"test2",
		"test3",
		"test1",
		"test2",
		"test3",
		"test3",
		"test1",
		"test2",
		"test3",
	];

	const bucketList = () => {
		return (
			<ProCard
				title={"存储桶列表"}
				headerBordered
				extra={
					<Button type="primary" onClick={() => setDrawerVisit(true)}>
						创建存储桶
					</Button>
				}>
				<div className={styles.div_proCard}>
					{list.map((item, index) => {
						return (
							<ProCard
								headStyle={{ backgroundColor: "#f0f2f5" }}
								hoverable
								bordered
								key={index}
								title={<b>名字：{item}</b>}
								style={{
									width: "180px",
									borderWidth: "1px",
								}}
								actions={[
									<SettingOutlined key="setting" />,
									<EditOutlined key="edit" />,
									<EllipsisOutlined key="ellipsis" />,
								]}>
								<Avatar shape={"square"} src={bucket} size={"large"} />
								<b style={{ marginLeft: 10 }}> size</b>
							</ProCard>
						);
					})}
				</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 WangyiDrawer;
