/** @format */
import { FunctionComponent, Suspense, useEffect, useState } from "react";
import { CheckCard, ProCard } from "@ant-design/pro-components";
import styles from "./index.module.less";

import { Outlet, useNavigate } from "react-router-dom";
import { Button, Empty, Skeleton } from "antd";
import StorageIcon from "@/constant/stroage-icon.ts";
import { ReloadOutlined } from "@ant-design/icons";
import { getAllStorage } from "@/api/oss";
import useStore from "@/utils/store/useStore.tsx";
import { observer } from "mobx-react";

const Bucket: FunctionComponent = observer(() => {
	const navigate = useNavigate();
	const [userStorage, setUserStorage] = useState<any>([]);
	const [loading, setLoading] = useState<boolean>(true);
	const userStore = useStore("user");
	const userId: any = userStore.getUserId();
	async function getUserStorage() {
		getAllStorage(userId).then((res: any) => {
			if (res && res.success) {
				setUserStorage(res.data);
				setLoading(false);
			}
		});
	}
	useEffect(() => {
		getUserStorage().then();
	}, []);
	return (
		<div className={styles.div_proCard}>
			<ProCard
				extra={
					<Button
						type="primary"
						shape={"circle"}
						onClick={() => {
							getUserStorage().then();
						}}
						icon={<ReloadOutlined />}></Button>
				}
				title="存储商"
				headerBordered
				className={styles.proCard}
				boxShadow={true}
				colSpan={"100%"}
				bordered>
				<Skeleton loading={loading} paragraph={{ rows: 14 }} active>
					<CheckCard.Group style={{ width: "100%" }}>
						{userStorage.map((item: any, index: number) => {
							return (
								<CheckCard
									key={index}
									avatar={StorageIcon[item.ossType]}
									style={{ width: "100%" }}
									title={item.name}
									description="点击查看"
									value={item.ossType}
									onChange={() => {
										navigate(`/main/bucket/${item.ossType}`);
									}}
								/>
							);
						})}
					</CheckCard.Group>
				</Skeleton>
			</ProCard>
			<ProCard className={styles.proCardBucket} bordered boxShadow>
				{location.pathname === "/main/bucket" || location.pathname === "/main/bucket/" ? (
					<>
						<div></div>
						<Empty description={"请选择存储商"} />
					</>
				) : (
					<>
						<Suspense>
							<Outlet />
						</Suspense>
					</>
				)}
			</ProCard>
		</div>
	);
});
export default Bucket;
