/** @format */
import { FunctionComponent, useEffect, useState } from "react";
import { Avatar, Card, Empty, Flex, List, Skeleton } from "antd";
import {
	AntDesignOutlined,
	BankOutlined,
	BulbOutlined,
	EnvironmentOutlined,
} from "@ant-design/icons";
import styles from "./index.module.less";
import { ProCard } from "@ant-design/pro-components";
import Meta from "antd/es/card/Meta";
import gitee from "@/assets/icons/gitee.svg";
import { Link, useNavigate } from "react-router-dom";
import { getAllStorage } from "@/api/oss";
import StorageIcon from "@/constant/stroage-icon.ts";
import { getUserInfoApi } from "@/api/user";

const UserInfo: FunctionComponent = () => {
	const navigate = useNavigate();
	const [loading, setLoading] = useState(true);
	const [userStorage, setUserStorage] = useState([]);
	const [userInfo, setUserInfo] = useState<any>({} as any);
	const data = [
		{
			title: "Ant Design Title 1",
		},
		{
			title: "Ant Design Title 2",
		},
		{
			title: "Ant Design Title 3",
		},
		{
			title: "Ant Design Title 4",
		},
	];
	async function getUserStorage() {
		const res = await getAllStorage("1");
		if (res.success) {
			setUserStorage(res.data);
			setLoading(false);
		}
	}
	const getUserInfo = async () => {
		const res = await getUserInfoApi("9");
		if (res.success) {
			setUserInfo(res.data);
		}
	};
	useEffect(() => {
		getUserInfo().then();
		getUserStorage().then();
	}, []);
	return (
		<>
			<div className={styles.user_info_header}>
				<div className={styles.user_info_header_avatar}>
					<Avatar
						size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
						icon={<AntDesignOutlined />}
					/>
					<span className={styles.user_info_header_name}>用户名</span>
					<div className={styles.user_info_header_desc}>
						<div>
							<BulbOutlined /> 前端架构师
						</div>
						<div>
							<EnvironmentOutlined /> 成都
						</div>
						<div>
							<BankOutlined /> 成都市上城
						</div>
					</div>
				</div>
			</div>
			<div className={styles.user_info_center_content}>
				<ProCard
					bordered
					style={{ maxWidth: "64%" }}
					title="我的存储商"
					boxShadow
					extra={<Link to={"/main/setting"}>查看更多</Link>}>
					<Flex vertical={false} align={"center"} justify={"space-between"} wrap={true}>
						<Skeleton loading={loading} active>
							{userStorage.map((item: any, index: number) => {
								return (
									<>
										<Card
											key={index}
											onClick={() => {
												navigate(`/main/setting/${item.ossType}`);
											}}
											style={{ width: 350, marginTop: 16, marginLeft: 10 }}
											hoverable={true}>
											<Meta
												avatar={<Avatar src={StorageIcon[item.ossType]} />}
												title={item.name}
												description={
													<>
														<span> 配置：{item.configCount}</span>
														<span style={{ marginLeft: 10 }}>
															存储桶： {item.bucketCount}
														</span>
													</>
												}></Meta>
										</Card>
									</>
								);
							})}
						</Skeleton>
					</Flex>
				</ProCard>

				<ProCard bordered style={{ maxWidth: "34%" }} title="我的存储桶" boxShadow>
					<Skeleton loading={loading} active>
						<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
							<Meta
								avatar={
									<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
								}
								title="Card title"
								description="This is the description"
							/>
						</Card>
					</Skeleton>
				</ProCard>
			</div>
			<div className={styles.user_info_bottom_content}>
				<ProCard
					bordered
					style={{ maxWidth: "64%" }}
					title="最近动态"
					boxShadow
					extra={<Link to={"#"}>查看更多</Link>}>
					<Skeleton loading={loading} active avatar>
						<List
							itemLayout="horizontal"
							dataSource={data}
							renderItem={(item, index) => (
								<List.Item>
									<List.Item.Meta
										avatar={
											<Avatar
												src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
											/>
										}
										title={<a href="https://ant.design">{item.title}</a>}
										description="Ant Design, a design language for background applications, is refined by Ant UED Team"
									/>
								</List.Item>
							)}
						/>
					</Skeleton>
				</ProCard>
				<ProCard bordered style={{ maxWidth: "34%" }} title="站内通知" boxShadow>
					<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
				</ProCard>
			</div>
		</>
	);
};
export default UserInfo;
