/** @format */
import React, { 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,
	Empty,
	Flex,
	FloatButton,
	Input,
	message,
	Modal,
	Select,
	Tooltip,
} from "antd";
import bucket from "@/assets/icons/bucket.svg";
import {
	CloudUploadOutlined,
	CopyOutlined,
	DeleteOutlined,
	DownloadOutlined,
	EllipsisOutlined,
	EyeOutlined,
	LeftOutlined,
	QrcodeOutlined,
	RedoOutlined,
	ReloadOutlined,
	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";
import { getAllStorage, getBucketFiles, getStorageBuckets } from "@/api/oss";
import StorageIcon from "@/constant/stroage-icon.ts";
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 [bucketLoading, setBucketLoading] = useState<boolean>(true);
	const [open, setOpen] = useState<boolean>(false);
	const [userStorage, setUserStorage] = useState([]);
	const [buckets, setBuckets] = useState<any[]>([]);
	const [currentStorage, setCurrentStorage] = useState<any>(null);
	const [currentBucket, setCurrentBucket] = useState<any>(null);

	async function getUserStorage() {
		getAllStorage("1").then((res: any) => {
			if (res && res.success) {
				setUserStorage(res.data);
				setLoading(false);
			}
		});
	}
	async function getFiles(bucket: any, dirName: any, type: any) {
		return getBucketFiles("1", bucket, dirName, type).then((res: any) => {
			if (res && res.success) {
				setFiles(res.data);
			}
		});
	}
	function getFileExtension(filename: any): string {
		const dotIndex = filename.lastIndexOf(".");
		return dotIndex !== -1 ? filename.slice(dotIndex + 1) : "";
	}
	async function getBuckets(type: any) {
		getStorageBuckets("1", type).then((res: any) => {
			if (res && res.success) {
				setBuckets(res.data);
				setBucketLoading(false);
			}
		});
	}

	useEffect(() => {
		getUserStorage().then();
	}, []);
	return (
		<>
			<div className={styles.file_main}>
				<div className={styles.file_content_left}>
					<ProCard bordered boxShadow style={{ minHeight: "83vh" }}>
						<Flex vertical={false} align={"center"}>
							<Select
								size="large"
								status="warning"
								style={{
									width: "100%",
									display: "flex",
									flexDirection: "row",
									alignItems: "center",
								}}
								showSearch={true}
								allowClear={true}
								onSelect={(value: any) => {
									setCurrentStorage(value);
									getBuckets(value).then();
								}}
								onClear={() => {
									setCurrentStorage(null);
									setBuckets([]);
								}}
								onChange={(value: any) => {
									setCurrentStorage(value);
									// getBuckets(value).then();
								}}
								notFoundContent={"未找到，请先配置存储商"}
								placeholder={"请选择存储商"}>
								{userStorage &&
									userStorage.map((item: any, index: number) => {
										return (
											<>
												<Select.Option value={item.ossType} key={index}>
													<Card
														key={item}
														bordered={false}
														style={{
															height: 35,
															display: "flex",
															alignItems: "center",
															flexDirection: "row",
														}}
														size={"small"}>
														<Avatar
															src={StorageIcon[item.ossType]}
															size={"small"}
														/>
														<span
															style={{
																marginLeft: "10px",
																fontWeight: "bolder",
															}}>
															{item.name}
														</span>
													</Card>
												</Select.Option>
											</>
										);
									})}
							</Select>
							<Button
								type="default"
								shape={"circle"}
								style={{ marginLeft: 10 }}
								onClick={() => {
									if (currentStorage != null) {
										getBuckets(currentStorage).then();
									}
								}}
								icon={<ReloadOutlined />}></Button>
						</Flex>
						<Divider></Divider>
						<div>
							<CheckCard.Group
								size={"small"}
								loading={bucketLoading}
								onChange={(value: any) => {
									store.clearAllFilePath();
									store.setFilePath(`/${value}`);
									setCurrentBucket(value);
									console.log(value);
									if (value !== undefined) {
										getFiles(value, "", currentStorage).then();
									}
								}}
								style={{ width: "100%" }}>
								{buckets.length === 0 ? (
									<>
										<Empty description={"请选择存储商"} />
									</>
								) : (
									<>
										{buckets &&
											Array.from(buckets).map((item: any, index: number) => {
												return (
													<>
														<div key={index}>
															<CheckCard
																style={{ width: "100%" }}
																title={item.name}
																avatar={bucket as any}
																description={item.size}
																value={item.name}
																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>
																}
															/>
														</div>
													</>
												);
											})}
									</>
								)}
							</CheckCard.Group>
						</div>
					</ProCard>
				</div>
				<div className={styles.file_content_right}>
					<ProCard bordered boxShadow style={{ minHeight: "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={() => {
											getFiles(
												currentBucket,
												store.getMiddlePath(),
												currentStorage,
											).then(() => {
												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={() => {
														getFiles(
															currentBucket,
															`${file.name}/`,
															currentStorage,
														).then(() => {
															store.setFilePath(file.name);
														});
													}}>
													<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);
