/** @format */

import React from "react";
import { Avatar, Card, Flex, Input, message, Select, Upload } from "antd";
import { CloudUploadOutlined } from "@ant-design/icons";
import { ProCard } from "@ant-design/pro-components";
import selectOptions from "@/components/Main/Settings/settings.ts";
import StorageIcon from "@/constant/stroage-icon.ts";

const { Dragger } = Upload;
const props: any = {
	name: "file",
	multiple: true,
	directory: true,
	action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
	onChange(info: any) {
		const { status } = info.file;
		if (status !== "uploading") {
			console.log(info.file, info.fileList);
		}
		if (status === "done") {
			message.success(`${info.file.name} file uploaded successfully.`);
		} else if (status === "error") {
			message.error(`${info.file.name} file upload failed.`);
		}
	},
	onDrop(e: any) {
		console.log("Dropped files", e.dataTransfer.files);
	},
};
const FileUpload: React.FC = () => {
	return (
		<>
			<Flex vertical={false} align={"center"}>
				<ProCard bordered={false} boxShadow={false}>
					<Flex vertical={false}>
						<Select
							size="large"
							status="warning"
							style={{
								width: "30%",
								display: "flex",
								flexDirection: "row",
								alignItems: "center",
							}}
							showSearch={true}
							allowClear={true}
							notFoundContent={"未找到，请先配置存储商"}
							placeholder={"请选择存储商"}>
							{selectOptions.map((storage: any, index: any) => {
								return (
									<Select.Option value={storage.value} key={index}>
										<Card
											bordered={false}
											style={{
												height: 35,
												display: "flex",
												alignItems: "center",
												flexDirection: "row",
											}}
											size={"small"}>
											<Avatar
												src={StorageIcon[storage.value]}
												size={"small"}
											/>{" "}
											<span
												style={{
													marginLeft: "10px",
													fontWeight: "bolder",
												}}>
												{storage.name}
											</span>
										</Card>
									</Select.Option>
								);
							})}
						</Select>
						<Select
							size="large"
							status="warning"
							style={{
								width: "30%",
								display: "flex",
								flexDirection: "row",
								alignItems: "center",
								marginLeft: "10px",
							}}
							showSearch={true}
							allowClear={true}
							notFoundContent={"未找到，请先配置存储商"}
							placeholder={"请选择存储桶"}>
							{selectOptions.map((storage: any, index: any) => {
								return (
									<Select.Option value={storage.value} key={index}>
										<Card
											bordered={false}
											style={{
												height: 35,
												display: "flex",
												alignItems: "center",
												flexDirection: "row",
											}}
											size={"small"}>
											<Avatar
												src={StorageIcon["bucket"]}
												size={"small"}
												shape={"square"}
											/>{" "}
											<span
												style={{
													marginLeft: "10px",
													fontWeight: "bolder",
												}}>
												{storage.name}
											</span>
										</Card>
									</Select.Option>
								);
							})}
						</Select>
						<Input placeholder={"请输入路径/默认当前打开的路径"} style={{ marginLeft: 10,width: "40%" }}></Input>
					</Flex>
				</ProCard>
			</Flex>
			<ProCard>
				<Dragger {...props}>
					<p className="ant-upload-drag-icon">
						<CloudUploadOutlined />
					</p>
					<p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
					<p className="ant-upload-hint">支持单次或批量上传。</p>
				</Dragger>
			</ProCard>
		</>
	);
};
export default FileUpload;
