/** @format */

import {
	GithubFilled,
	InfoCircleFilled,
	LogoutOutlined,
	QuestionCircleFilled,
} from "@ant-design/icons";
import {
	DefaultFooter,
	PageContainer,
	ProCard,
	ProLayout,
} from "@ant-design/pro-components";
import { Link, Outlet, useLocation } 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 { getUserMenuPermission } from "@/api/user";

export default function Layout() {
	const location = useLocation();
	return (
		<div
			id="pro-layout"
			style={{
				height: "100vh",
			}}>
			<ProLayout
				logo={logo}
				layout={"mix"}
				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("17");
					// 	return res.data.routes;
					// },
					type: "group",
					defaultOpenAll: false,
					hideMenuWhenCollapsed: false,
					collapsedShowTitle: false,
				}}
				disableMobile={false}
				location={{
					pathname: location.pathname,
				}}
				avatarProps={{
					src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
					title: "七妮妮",
					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: "退出登录",
										},
									],
								}}>
								{dom}
							</Dropdown>
						);
					},
				}}
				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",
								title: "schisandra",
								href: "https://landaiqing.cn",
							},
						]}
						copyright="2024"
					/>
				)}>
				<PageContainer title={false}>
					<ProCard>
						<div>
							<Suspense>
								<Outlet />
							</Suspense>
						</div>
					</ProCard>
				</PageContainer>
			</ProLayout>
		</div>
	);
}