/** @format */

import {
	GithubFilled,
	InfoCircleFilled,
	LogoutOutlined,
	QuestionCircleFilled,
} from "@ant-design/icons";
import { DefaultFooter, PageContainer, ProCard, ProLayout } from "@ant-design/pro-components";
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
import logo from "@/assets/images/logo.png";
import { Suspense } from "react";
import { Dropdown } from "antd";
import settings from "@/views/Main/settings.tsx";
import { logout } from "@/api/user";
import { observer } from "mobx-react";
import useStore from "@/utils/store/useStore.tsx";
import { getUserMenuPermission } from "@/api/user";
import { clearStorage, getStorageFromKey, removeStorageFromKey } from "@/utils/localStorage/config.ts";
import localforage from "localforage";

const Layout = () => {
	const location = useLocation();
	const store = useStore("user");
	const navigate = useNavigate();
	return (
		<div
			id="pro-layout"
			style={{
				height: "100vh",
			}}>
			<ProLayout
				logo={logo as any}
				layout={"mix"}
				splitMenus={false}
				pure={false}
				loading={false}
				contentWidth={"Fluid"}
				title={"五味子云存储"}
				siderWidth={216}
				menuItemRender={(menuItemProps, defaultDom) => {
					if (menuItemProps.isUrl || !menuItemProps.path) {
						return defaultDom;
					}
					return <Link to={menuItemProps.path}>{defaultDom}</Link>;
				}}
				{...settings}
				menu={{
					request: async () => {
						const res: any = await getUserMenuPermission(store.getUserId() as any);
						return res.data.routes;
					},
					type: "group",
					defaultOpenAll: false,
					hideMenuWhenCollapsed: false,
					collapsedShowTitle: false,
				}}
				disableMobile={false}
				location={{
					pathname: location.pathname,
				}}
				avatarProps={
					{
						src: store.getAvatar() || logo,
						title: store.getNickName() || store.getName() || "unknown",
						size: "large",
						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
						// @ts-expect-error
						render: (props, dom) => {
							return (
								<Dropdown
									menu={{
										items: [
											{
												key: "logout",
												icon: <LogoutOutlined />,
												label: "退出登录",
												onClick: () => {
													logout(store.getUserId());
													clearStorage();
													store.setToken("");
													store.setUserId("");
													store.setAvatar("");
													store.setNickName("");
													setTimeout(() => {
														navigate("/login");
													}, 1000);
												},
											},
										],
									}}>
									{dom}
								</Dropdown>
							);
						},
					} as any
				}
				actionsRender={(props: any) => {
					// eslint-disable-next-line react/prop-types
					if (props.isMobile) return [];
					return [
						<InfoCircleFilled key="InfoCircleFilled" />,
						<QuestionCircleFilled key="QuestionCircleFilled" />,
						<GithubFilled key="GithubFilled" />,
					];
				}}
				breadcrumbRender={(routers = []) => [
					{
						path: "/main/home",
						title: "主页",
					},
					...routers,
				]}
				footerRender={() => (
					<DefaultFooter
						links={[
							{
								key: "schisandra-1",
								title: "五味子云存储",
								href: "https://landaiqing.cn",
							},
							{
								key: "schisandra-2",
								title: "schisandra cloud storage",
								href: "https://landaiqing.cn",
							},
						]}
						copyright="2024 by schisandra"
					/>
				)}>
				<PageContainer title={false} breadcrumb={false as any} ghost={true}>
					<ProCard>
						<div>
							<Suspense>
								<Outlet />
							</Suspense>
						</div>
					</ProCard>
				</PageContainer>
			</ProLayout>
		</div>
	);
};
export default observer(Layout);
