/** @format */
import { ProCard } from "@ant-design/pro-components";
import { Avatar, Card, Empty, Select } from "antd";

import styles from "./index.module.less";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { Suspense } from "react";
import selectOptions from "@/components/Main/Settings/settings.ts";
import StorageIcon from "@/constant/stroage-icon.ts";
export default () => {
	const navigate = useNavigate();
	const location = useLocation();
	return (
		<div className={styles.settings_container}>
			<ProCard bordered={false} boxShadow>
				<div className={styles.settings_header}>
					<Select
						size="large"
						status="warning"
						style={{ width: "20%" }}
						showSearch={true}
						allowClear={true}
						onClear={() => {
							navigate("/main/setting");
						}}
						notFoundContent={"未找到，请先配置存储商"}
						onSelect={(value: any) => {
							navigate("/main/setting/" + value);
						}}
						fieldNames={{
							label: "name",
							value: "value",
						}}
						labelRender={(label: any) => {
							return (
								<>
									<Card
										bordered={false}
										style={{
											height: 35,
											display: "flex",
											alignItems: "center",
											flexDirection: "row",
										}}
										size={"small"}>
										<Avatar src={StorageIcon[label.value]} size={"small"} />
										<span
											style={{
												marginLeft: "10px",
												fontWeight: "bolder",
											}}>
											{label.label}
										</span>
									</Card>
								</>
							);
						}}
						options={selectOptions}
						optionRender={(item: any) => {
							return (
								<>
									<Card
										bordered={false}
										style={{
											height: 35,
											display: "flex",
											alignItems: "center",
											flexDirection: "row",
										}}
										size={"small"}>
										<Avatar src={StorageIcon[item.value]} size={"small"} />
										<span
											style={{
												marginLeft: "10px",
												fontWeight: "bolder",
											}}>
											{item.label}
										</span>
									</Card>
								</>
							);
						}}
						placeholder={"请选择存储商"}></Select>
				</div>
			</ProCard>
			<ProCard style={{ marginTop: 20, height: "100%" }} bordered boxShadow>
				{location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? (
					<>
						<Empty description={"请选择存储商"} style={{ height: "65vh" }} />
					</>
				) : (
					<>
						<Suspense>
							<Outlet />
						</Suspense>
					</>
				)}
			</ProCard>
		</div>
	);
};