/** @format */
import { FunctionComponent, useEffect, useState } from "react";
import { Avatar, Card, Empty, Flex, List, Skeleton } from "antd";
import { 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 { Link, useNavigate } from "react-router-dom";
import { getAllStorage } from "@/api/oss";
import StorageIcon from "@/constant/stroage-icon.ts";
import { getRecentShare, getUserInfoApi } from "@/api/user";
import useStore from "@/utils/store/useStore.tsx";
import { observer } from "mobx-react";

const UserInfo: FunctionComponent = observer(() => {
	const navigate = useNavigate();
	const [loading, setLoading] = useState(true);
	const [loadingStorage, setLoadingStorage] = useState(true);
	const [userStorage, setUserStorage] = useState([]);
	const [recentShare, setRecentShare] = useState([]);
	const [userInfo, setUserInfo] = useState<any>({} as any);
	const store = useStore("user");
	const userId: any = store.getUserId();
	async function getUserStorage() {
		const res: any = await getAllStorage(userId);
		if (res && res.success && res.data) {
			setUserStorage(res.data);
			setLoadingStorage(false);
		}
	}
	async function getUserRecentShare() {
		const res: any = await getRecentShare(userId);
		if (res && res.success && res.data) {
			setRecentShare(res.data);
			setLoading(false);
		}
	}
	const getUserInfo = async () => {
		const res = await getUserInfoApi(userId);
		if (res && res.success && res.data) {
			setUserInfo(res.data);
		}
	};
	useEffect(() => {
		getUserInfo().then();
		getUserStorage().then();
		getUserRecentShare().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 }}
						src={userInfo.avatar}
					/>
					<span className={styles.user_info_header_name}>{userInfo.nickName}</span>
					<div className={styles.user_info_header_desc}>
						<div>
							<BulbOutlined /> {userInfo.introduce || "-------"}
						</div>
						<div>
							<EnvironmentOutlined /> {userInfo.location || "-------"}
						</div>
						<div>
							<BankOutlined /> {userInfo.company || "-------"}
						</div>
					</div>
				</div>
			</div>
			<div className={styles.user_info_center_content}>
				<ProCard
					bordered
					style={{ maxWidth: "100%" }}
					title="我的存储商"
					boxShadow
					extra={<Link to={"/main/setting"}>查看更多</Link>}>
					<Flex vertical={false} align={"center"} justify={"space-between"} wrap={true}>
						{userStorage && userStorage.length === 0 ? (
							<Empty description={"暂无数据"}></Empty>
						) : (
							<>
								<Skeleton loading={loadingStorage} active>
									{userStorage.map((item: any, index: number) => {
										return (
											<div key={index}>
												<Card
													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>
											</div>
										);
									})}
								</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>
					{recentShare && recentShare.length === 0 ? (
						<Empty description={"暂无数据"}></Empty>
					) : (
						<Skeleton loading={loading} active avatar>
							<List
								itemLayout="horizontal"
								dataSource={recentShare}
								renderItem={(item: any) => (
									<List.Item>
										<List.Item.Meta
											avatar={<Avatar src={userInfo.avatar} />}
											title={item.title}
											description={item.date}
										/>
									</List.Item>
								)}
							/>
						</Skeleton>
					)}
				</ProCard>
				<ProCard bordered style={{ maxWidth: "34%" }} title="站内通知" boxShadow>
					<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
				</ProCard>
			</div>
		</>
	);
});
export default UserInfo;
