/** @format */
import { FunctionComponent, useEffect, useState } from "react";
import { CheckCard, ProCard } from "@ant-design/pro-components";
import styles from "./index.module.less";
import {
	Avatar,
	Breadcrumb,
	Button,
	Card,
	Divider,
	Dropdown,
	FloatButton,
	message,
	Select,
	Tooltip,
} from "antd";
import ali from "@/assets/icons/aliyun.svg";
import bucket from "@/assets/icons/bucket.svg";
import tencent from "@/assets/icons/tencent.svg";
import {
	CommentOutlined,
	CustomerServiceOutlined,
	EllipsisOutlined,
	LeftOutlined,
} from "@ant-design/icons";
import standard_dir from "@/assets/icons/standard_directory.svg";
import useStore from "@/utils/store/useStore.tsx";
import { observer } from "mobx-react";
import FileIcon from "@/context/file-icon.ts";
import file_icon from "@/assets/icons/files/file.svg";
const dataList: any = [
	{
		name: "demo01.java",
		isDir: false,
		path: "demo0.java",
		length: "346",
		createTime: "2024-06-26T08:22:13.244Z",
	},
	{
		name: "测试.pdf",
		isDir: false,
		path: "测试.pdf",
		length: "346",
		createTime: "2024-06-26T08:22:13.244Z",
	},
	{
		name: "test.jpg",
		isDir: false,
		path: "test.jpg",
		length: "2057535",
		createTime: "2024-06-27T02:27:05.472Z",
	},
	{
		name: "test1.png",
		isDir: false,
		path: "test1.png",
		length: "1766511",
		createTime: "2024-06-29T10:28:03.224Z",
	},
	{
		name: "schisandra",
		isDir: true,
		path: "schisandra/",
	},
	{
		name: "测试文件夹",
		isDir: true,
		path: "测试文件夹/",
	},
];
const fileList: any = [
	{
		name: "test1.png",
		isDir: false,
		path: "test1.png",
		length: "1766511",
		createTime: "2024-06-29T10:28:03.224Z",
	},
	{
		name: "schisandra",
		isDir: true,
		path: "schisandra/",
	},
];

const File: FunctionComponent = () => {
	const store = useStore("file");
	const [files, setFiles] = useState<any>([]);
	async function getFile() {
		setFiles(dataList);
	}
	function getFileExtension(filename: any): string {
		const dotIndex = filename.lastIndexOf(".");
		return dotIndex !== -1 ? filename.slice(dotIndex + 1) : "";
	}

	useEffect(() => {
		getFile().then();
	}, []);
	return (
		<>
			<div className={styles.file_main}>
				<div className={styles.file_content_left}>
					<ProCard bordered boxShadow style={{ height: "75vh" }}>
						<Select
							size="large"
							status="warning"
							style={{ width: "100%" }}
							showSearch={true}
							allowClear={true}
							notFoundContent={"未找到，请先配置存储商"}
							placeholder={"请选择存储商"}>
							<Select.Option value="ali">
								<Card
									bordered={false}
									style={{
										height: 35,
										display: "flex",
										alignItems: "center",
										flexDirection: "row",
									}}
									size={"small"}>
									<Avatar src={ali} size={"small"} />
									<span style={{ marginLeft: "10px", fontWeight: "bolder" }}>
										阿里云OSS
									</span>
								</Card>
							</Select.Option>
							<Select.Option value="腾讯">
								<Card
									style={{
										height: 35,
										display: "flex",
										alignItems: "center",
										flexDirection: "row",
									}}
									bordered={false}
									size={"small"}>
									<Avatar src={tencent} size={"small"} />{" "}
									<span style={{ marginLeft: "10px", fontWeight: "bolder" }}>
										腾讯云COS
									</span>
								</Card>
							</Select.Option>
						</Select>
						<Divider></Divider>
						<div>
							<CheckCard.Group
								defaultValue="A"
								size={"small"}
								style={{ width: "100%" }}>
								<CheckCard
									style={{ width: "100%" }}
									title="schisandra"
									avatar={bucket}
									description="100Mb"
									value="schisandra"
									extra={
										<Dropdown
											placement="top"
											menu={{
												onClick: ({ domEvent }) => {
													domEvent.stopPropagation();
													message.info("menu click");
												},
												items: [
													{
														label: "删除",
														key: "1",
													},
													{
														label: "编辑",
														key: "2",
													},
												],
											}}>
											<EllipsisOutlined
												style={{ fontSize: 22, color: "rgba(0,0,0,0.5)" }}
												onClick={(e) => e.stopPropagation()}
											/>
										</Dropdown>
									}
								/>
								<CheckCard
									style={{ width: "100%" }}
									title="schisandra2"
									avatar={bucket}
									description="100Mb"
									value="schisandra2"
									extra={
										<Dropdown
											placement="top"
											menu={{
												onClick: ({ domEvent }) => {
													domEvent.stopPropagation();
													message.info("menu click");
												},
												items: [
													{
														label: "删除",
														key: "1",
													},
													{
														label: "编辑",
														key: "2",
													},
												],
											}}>
											<EllipsisOutlined
												style={{ fontSize: 22, color: "rgba(0,0,0,0.5)" }}
												onClick={(e) => e.stopPropagation()}
											/>
										</Dropdown>
									}
								/>
							</CheckCard.Group>
						</div>
					</ProCard>
				</div>
				<div className={styles.file_content_right}>
					<ProCard bordered boxShadow style={{ height: "75vh" }}>
						<div className={styles.file_right_header}>
							<Button
								shape="circle"
								icon={<LeftOutlined />}
								onClick={() => {
									setFiles(dataList);
									store.clearFilePath();
								}}
							/>
							<Breadcrumb items={store.getFilePath()} style={{ marginLeft: 15 }} />
						</div>

						<div className={styles.file_right_content}>
							<CheckCard.Group
								multiple={true}
								bordered={false}
								className={styles.file_right_content}>
								{files.map((file: any, index: any) => {
									if (file.isDir) {
										return (
											<Dropdown
												key={index}
												menu={{
													items: [
														{
															label: "删除",
															key: "1",
														},
														{
															label: "编辑",
															key: "2",
														},
													],
												}}
												trigger={["contextMenu"]}>
												<div
													style={{ marginLeft: 10 }}
													onDoubleClick={() => {
														store.setFilePath({
															title: file.name,
														});
														setFiles(fileList);
													}}>
													<CheckCard
														size={"small"}
														value={file.name}
														avatar={
															<div
																style={{
																	display: "flex",
																	flexDirection: "column",
																	justifyContent: "center",
																	alignItems: "center",
																}}>
																<Avatar
																	src={standard_dir}
																	shape={"square"}
																	size={"large"}
																/>
																<Tooltip
																	title={file.name}
																	placement={"bottom"}
																	color={"lime"}>
																	<span
																		className={
																			styles.file_name
																		}>
																		{file.name}
																	</span>
																</Tooltip>
															</div>
														}
														className={styles.file_card}
														style={{
															width: 100,
															height: 100,
															display: "flex",
															alignItems: "center",
															justifyContent: "center",
														}}
													/>
												</div>
											</Dropdown>
										);
									} else {
										return (
											<Dropdown
												key={index}
												menu={{
													items: [
														{
															label: "删除",
															key: "1",
														},
														{
															label: "编辑",
															key: "2",
														},
													],
												}}
												trigger={["contextMenu"]}>
												<div style={{ marginLeft: 10 }}>
													<CheckCard
														size={"small"}
														value={file.name}
														bodyStyle={{ overflow: "hidden" }}
														avatar={
															<div
																style={{
																	display: "flex",
																	flexDirection: "column",
																	justifyContent: "center",
																	alignItems: "center",
																	overflow: "hidden",
																}}>
																<Avatar
																	src={
																		FileIcon[
																			getFileExtension(
																				file.name,
																			)
																		] || file_icon
																	}
																	shape={"square"}
																	size={"large"}
																/>
																<Tooltip
																	title={file.name}
																	color={"lime"}
																	autoAdjustOverflow={true}
																	placement={"bottom"}>
																	<span
																		className={
																			styles.file_name
																		}>
																		{file.name}
																	</span>
																</Tooltip>
															</div>
														}
														className={styles.file_card}
														style={{
															width: 100,
															height: 100,
															display: "flex",
															alignItems: "center",
															justifyContent: "center",
														}}
													/>
												</div>
											</Dropdown>
										);
									}
								})}
							</CheckCard.Group>
						</div>
					</ProCard>
				</div>
			</div>

			<FloatButton.Group
				trigger="click"
				type="primary"
				style={{ right: "5%" }}
				icon={<CustomerServiceOutlined />}>
				<FloatButton />
				<FloatButton icon={<CommentOutlined />} />
			</FloatButton.Group>
		</>
	);
};
export default observer(File);
