/** @format */
import { FunctionComponent, useEffect, useState } from "react";
import { CheckCard, ProCard } from "@ant-design/pro-components";
import styles from "./index.module.less";
import {
	Avatar,
	Button,
	Card,
	Divider,
	Dropdown,
	Flex,
	FloatButton,
	Input,
	message,
	Modal,
	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 {
	CloudUploadOutlined,
	CopyOutlined,
	DeleteOutlined,
	DownloadOutlined,
	EllipsisOutlined,
	EyeOutlined,
	LeftOutlined,
	QrcodeOutlined,
	RedoOutlined,
	ScissorOutlined,
	SearchOutlined,
	SnippetsOutlined,
} 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 "@/constant/file-icon.ts";
import file_icon from "@/assets/icons/files/file.svg";
import FileUpload from "@/components/Main/File/components/FileUpload.tsx";
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>([]);
	const [loading, setLoading] = useState<boolean>(true);
	const [open, setOpen] = useState<boolean>(false);
	async function getFile() {
		setFiles(dataList);
	}
	function getFileExtension(filename: any): string {
		const dotIndex = filename.lastIndexOf(".");
		return dotIndex !== -1 ? filename.slice(dotIndex + 1) : "";
	}

	useEffect(() => {
		getFile().then();
		setTimeout(() => {
			setLoading(false);
		}, 2000);
	}, []);
	return (
		<>
			<div className={styles.file_main}>
				<div className={styles.file_content_left}>
					<ProCard bordered boxShadow style={{ height: "83vh" }}>
						<Select
							size="large"
							status="warning"
							style={{
								width: "100%",
								display: "flex",
								flexDirection: "row",
								alignItems: "center",
							}}
							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 as any} 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 as any} 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 as any}
									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 as any}
									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: "83vh" }}>
						<div className={styles.file_right_header}>
							<Flex vertical={false} align={"center"} justify={"flex-start"}>
								<Flex vertical={false} align={"center"}>
									<Button
										shape="circle"
										icon={<LeftOutlined />}
										onClick={() => {
											setFiles(dataList);
											store.clearFilePath();
										}}
									/>
									<Button
										style={{ marginLeft: 20 }}
										shape="circle"
										icon={<RedoOutlined />}
									/>
								</Flex>
								<Input
									value={store.getFilePath().join("/")}
									style={{ marginLeft: 15 }}
								/>
							</Flex>
							<Flex
								vertical={false}
								align={"center"}
								justify={"flex-start"}
								style={{ marginTop: 10 }}>
								<Tooltip title="删除" placement={"bottom"}>
									<Button shape="circle" icon={<DeleteOutlined />} />
								</Tooltip>
								<Tooltip title="下载" placement={"bottom"}>
									<Button
										style={{ marginLeft: 20 }}
										shape="circle"
										icon={<DownloadOutlined />}
									/>
								</Tooltip>
								<Tooltip title="预览" placement={"bottom"}>
									<Button
										style={{ marginLeft: 20 }}
										shape="circle"
										icon={<EyeOutlined />}
									/>
								</Tooltip>
								<Tooltip title="扫码下载" placement={"bottom"}>
									<Button
										style={{ marginLeft: 20 }}
										shape="circle"
										icon={<QrcodeOutlined />}
									/>
								</Tooltip>
								<Tooltip title="粘贴" placement={"bottom"}>
									<Button
										style={{ marginLeft: 20 }}
										shape="circle"
										icon={<SnippetsOutlined />}
									/>
								</Tooltip>
								<Tooltip title="剪切" placement={"bottom"}>
									<Button
										style={{ marginLeft: 20 }}
										shape="circle"
										icon={<ScissorOutlined />}
									/>
								</Tooltip>
								<Tooltip title="复制" placement={"bottom"}>
									<Button
										style={{ marginLeft: 20 }}
										shape="circle"
										icon={<CopyOutlined />}
									/>
								</Tooltip>
								<Tooltip title="搜索" placement={"bottom"}>
									<Button
										style={{ marginLeft: 20 }}
										shape="circle"
										icon={<SearchOutlined />}
									/>
								</Tooltip>
							</Flex>
						</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(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 as any}
																	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
				type="primary"
				style={{ right: "5%" }}
				icon={<CloudUploadOutlined />}
				onClick={() => setOpen(true)}
			/>
			<Modal
				title={<p>文件上传</p>}
				loading={loading}
				footer={false}
				open={open}
				width={"50%"}
				onCancel={() => setOpen(false)}>
				<FileUpload></FileUpload>
			</Modal>
		</>
	);
};
export default observer(File);