import { useState, useEffect } from "react";
import classnames from "classnames";
import style from "./index.module.css";
import MyTooltip from "@/components/mui/MyTooltip";
import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
import CloudEController from "@/api/fileserver/CloudEController";
import useMyRequest from "@/hooks/useMyRequest";
import { getPublicProject } from "@/api/resourceCenter";
import { getDataFileToken, hpczone } from "@/api/project_api";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import useWindowSize from "@/hooks/useWindowSize";

type LogViewProps = {
	logs: any[];
};

const LogView = (props: LogViewProps) => {
	const { logs } = props;
	const [hpczoneList, setHpczoneList] = useState<Array<any>>([]);
	const [publicProjectId, setPublicProjectId] = useState("");
	const [publicZoneId, setPublicZoneId] = useState("");
	const [fileToken, setFileToken] = useState("");
	const { width, height } = useWindowSize();
	// 当前选择的日志
	const [logCurrent, setLogCurrent] = useState<number>(0);
	// 当前日志的内容文本
	const [logText, setLogText] = useState("");
	// 当前日志路径
	const [logPath, setLogPath] = useState("");

	const [displacement, setDisplacement] = useState(0);

	const [middleDynamicWidth, setMiddleDynamicWidth] = useState(0);

	const [leftButtonColor, setLeftButtonColor] = useState("#585D62");
	const [rightButtonColor, setRightButtonColor] = useState("#585D62");

	const { run: getPublicProjectFn } = useMyRequest(getPublicProject, {
		onSuccess: (res: any) => {
			setPublicProjectId(res.data[0].id);
			setPublicZoneId(res.data[0].zoneId);
			getDataFileTokenFn({ id: res.data[0].id });
		},
	});

	const { run: getDataFileTokenFn } = useMyRequest(getDataFileToken, {
		onSuccess: (res: any) => {
			setFileToken(res.data);
		},
	});

	useEffect(() => {
		getPublicProjectFn();
	}, [getPublicProjectFn]);

	const { run: hpczoneFn } = useMyRequest(hpczone, {
		onSuccess: (res: any) => {
			setHpczoneList(res.data);
		},
	});

	useEffect(() => {
		hpczoneFn();
	}, [hpczoneFn]);

	useEffect(() => {
		setLogPath(logs[logCurrent]?.logPath);
	}, [logs, logCurrent]);

	// 请求日志文本
	useEffect(() => {
		if (logPath) {
			const path = logPath.slice(12);
			let origin = "";
			hpczoneList.forEach((item) => {
				if (item.id === publicZoneId) {
					origin = item?.storageConfig?.fileServerEndPoint;
				}
			});
			if (path && fileToken && publicProjectId && origin) {
				CloudEController.JobFileDownloadText(
					path,
					fileToken as string,
					publicProjectId as string,
					origin
				)?.then((res) => {
					setLogText(res.data);
				});
			} else {
				setLogText("");
			}
		} else {
			setLogText("");
		}
	}, [logPath, fileToken, hpczoneList, publicProjectId, publicZoneId]);

	// 选择日志时改变日志路径
	useEffect(() => {
		setLogPath(logs[logCurrent]?.logPath);
	}, [logCurrent, logs]);

	//获取盒子的总宽度，用于滑动效果判断
	useEffect(() => {
		const box = document.getElementById("middleDynamic");
		setMiddleDynamicWidth(box ? box.offsetWidth : 0);
	}, []);

	useEffect(() => {
		if (middleDynamicWidth < width - 97) {
			setLeftButtonColor("#585D62");
			setRightButtonColor("#585D62");
		}
		if (displacement === 0) {
			setLeftButtonColor("#585D62");
		} else {
			setLeftButtonColor("#C0C5CD");
		}
		if (
			middleDynamicWidth > width - 97 &&
			displacement !== -middleDynamicWidth + width - 97
		) {
			setRightButtonColor("#C0C5CD");
		} else {
			setRightButtonColor("#585D62");
		}
	}, [width, middleDynamicWidth, displacement]);

	// 下载当前日志
	// const handleDownLoad = () => {
	// 	const path = logPath.slice(12);
	// 	CloudEController.JobFileDownload(
	// 		path,
	// 		fileToken as string,
	// 		publicProjectId as string
	// 	);
	// };

	const rightClick = () => {
		if (middleDynamicWidth < width - 97) {
			return;
		}
		if (-displacement > middleDynamicWidth - width * 1.8 + 97) {
			setDisplacement(-middleDynamicWidth + width - 97);
			return;
		}
		const newDisplacement = displacement - width * 0.8;
		setDisplacement(newDisplacement);
	};

	const leftClick = () => {
		if (-displacement < width * 0.8) {
			setDisplacement(0);
			return;
		}
		const newDisplacement = displacement + width * 0.8;
		setDisplacement(newDisplacement);
	};

	return (
		<div className={style.logViewBox}>
			<div className={style.logViewContentMask}></div>
			<div className={style.logViewTop}>
				<div
					className={style.leftButton}
					onClick={leftClick}
					style={{
						color: leftButtonColor,
						cursor: leftButtonColor === "#585D62" ? "default" : "pointer",
					}}
				>
					<ChevronLeftIcon />
				</div>
				<div className={style.middleFixed}>
					<div
						className={style.middleDynamic}
						id="middleDynamic"
						style={{ left: `${displacement}px` }}
					>
						{logs.map((item: any, index: number) => {
							return (
								<MyTooltip
									title={item.logName}
									placement="bottom"
									arrow={false}
									enterDelay={1000}
								>
									<div
										key={index}
										onClick={() => {
											setLogCurrent(index);
										}}
										className={classnames({
											[style.logTitle]: true,
											[style.logTitleSelected]: index === logCurrent,
										})}
									>
										<InsertDriveFileOutlinedIcon className={style.fileIcon} />
										<span className={style.logName}>{item.logName}</span>
									</div>
								</MyTooltip>
							);
						})}
					</div>
				</div>
				<div className={style.gradientBox}></div>
				<div
					className={style.rightButton}
					onClick={rightClick}
					style={{
						color: rightButtonColor,
						cursor: rightButtonColor === "#585D62" ? "default" : "pointer",
					}}
				>
					<ChevronRightIcon />
				</div>
			</div>
			<div className={style.logViewContent}>{logText}</div>
			{/* <div className={style.logViewBottom}>
					<MyButton text="下载当前日志" onClick={handleDownLoad} />
				</div> */}
		</div>
	);
};

export default LogView;
