/** @format */

import { GithubFilled, InfoCircleFilled, QuestionCircleFilled } from "@ant-design/icons";
import { PageContainer, ProCard, ProLayout } from "@ant-design/pro-components";
import defaultProps from "./defaultSettings.tsx";
import { Link, Outlet, useLocation } from "react-router-dom";
import logo from "@/assets/images/logo.png";
import { Suspense } from "react";

export default function Layout() {
	const location: any = useLocation();
	return (
		<div
			id="test-pro-layout"
			style={{
				height: "100vh",
			}}>
			<ProLayout
				logo={logo}
				layout={"mix"}
				// contentWidth={"Fluid"}
				menu={{ defaultOpenAll: true, hideMenuWhenCollapsed: false }}
				title={"五味子云存储"}
				siderWidth={216}
				menuItemRender={(menuItemProps, defaultDom) => {
					if (menuItemProps.isUrl || !menuItemProps.path) {
						return defaultDom;
					}
					return <Link to={menuItemProps.path}>{defaultDom}</Link>;
				}}
				{...defaultProps}
				location={location}
				avatarProps={{
					src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
					title: "七妮妮",
					size: "small",
				}}
				actionsRender={(props: any) => {
					// eslint-disable-next-line react/prop-types
					if (props.isMobile) return [];
					return [
						<InfoCircleFilled key="InfoCircleFilled" />,
						<QuestionCircleFilled key="QuestionCircleFilled" />,
						<GithubFilled key="GithubFilled" />,
					];
				}}>
				<PageContainer>
					<ProCard>
						<div>
							<Suspense>
								<Outlet />
							</Suspense>
						</div>
					</ProCard>
				</PageContainer>
			</ProLayout>
		</div>
	);
}
