/**
 * 请求任意张图片
 * @returns
 */
export const fetchRandomImage = async (imgNums: number) => {
	// return IMG_DATA;
	// eslint-disable-next-line no-unreachable
	try {
		const res: I_ImgRes = await axios.get(
			'https://api.unsplash.com/photos/random',
			{
				params: {
					client_id: UNSPLASH_ACCESS_KEY, // 替换为你的Access Key
					count: imgNums,
				},
			},
		);
		return res.data.length !== 0 ? res?.data : [];
	} catch (error) {
		console.error('Error fetching image from Unsplash:', error);
	}
};

import React, {useEffect} from 'react';
import style from './style/index.module.less';
import {fetchRandomImage} from '../../api';
import type {UnsplashImage} from '../../api';
export interface WaterfallProps {
	/**
	 * 图片数据列表
	 */
	items?: string[];
	/**
	 * 图片列宽度，不传入则按列数，每一列宽度是容器的【1 / maxColumns】
	 */
	columnWidth?: number;
	/**
	 * 图片间距
	 */
	gapSize?: number;
	/**
	 * 最大列数
	 */
	maxColumns?: number;
}

/**
 * 瀑布流组件
 */
export const Waterfall = ({
	items,
	columnWidth = 200,
	gapSize = 10,
	maxColumns = 5,
	...props
}: WaterfallProps) => {
	const [images, setImages] = React.useState<any>([]);

	useEffect(() => {
		const getImages = async () => {
			try {
				const imageUrls = await fetchRandomImage(10); // 获取30张图片
				setImages(imageUrls);
			} catch (error) {
				console.error('Error fetching images from Unsplash:', error);
			}
		};
		getImages();
	}, []);

	useEffect(() => {
		console.log('✅  ~ images:', images);
	}, [images]);
	return (
		<div className={style.container}>
			{images?.map((image: UnsplashImage, index: number) => {
				console.log('✅ ~  image:', image);

				return (
					<div key={`${image?.id}${index}`} className={style.item}>
						<img src={image.urls.full} alt={`Image ${index}`} />
					</div>
				);
			})}
		</div>
	);
};

.container {
	width: 100%; /* 容器宽度 */
	column-count: 5; /* 定义列数 */
	column-gap: 16px; /* 列与列之间的间距 */

	.item {
		break-inside: avoid; /* 防止内容在列内部断开 */
		margin-bottom: 16px; /* 每个项目之间的间距 */

		img {
			width: 100%; /* 图片宽度填满列宽 */
			height: auto; /* 保持图片宽高比 */
		}
	}
}

/* 为了响应式设计，你可以使用媒体查询来改变列数 */
@media (width <= 1000px) {
	/* stylelint-disable-next-line rule-empty-line-before */
	.container {
		column-count: 4;
	}
}

@media (width <= 800px) {
	/* stylelint-disable-next-line rule-empty-line-before */
	.container {
		column-count: 3;
	}
}

@media (width <= 600px) {
	/* stylelint-disable-next-line rule-empty-line-before */
	.container {
		column-count: 2;
	}
}

@media (width <= 400px) {
	/* stylelint-disable-next-line rule-empty-line-before */
	.container {
		column-count: 1;
	}
}

const flexTypeRender = (options: WaterfallProps) => {
	const {items = [], maxColumns} = options;
	const [newMaxColumns, setNewMaxColumns] = useState(maxColumns ?? 5);
	useEffect(() => {
		const handleResize = () => {
			if (window.innerWidth < 600) {
				setNewMaxColumns(2);
			} else if (window.innerWidth < 800) {
				setNewMaxColumns(3);
			} else if (window.innerWidth < 1000) {
				setNewMaxColumns(4);
			} else if (window.innerWidth < 1200) {
				setNewMaxColumns(5);
			}
		};
		window.addEventListener('resize', handleResize);
		handleResize();
		return () => {
			window.removeEventListener('resize', handleResize);
		};
	}, []);

	return (
		<div className={style.flexContainer}>
			{Array(newMaxColumns)
				.fill(0)
				?.map((item, index) => {
					return (
						<div className={style.childContainer} key={index}>
							{shuffleArray(items)?.map(
								(image: UnsplashImage, index: number) => {
									return (
										<div key={`${image?.id}${index}`} className={style.item}>
											<img src={image.urls.full} alt={`Image ${index}`} />
										</div>
									);
								},
							)}
						</div>
					);
				})}
		</div>
	);
};

.flexContainer {
	display: flex;
	flex-direction: row;
	width: 100%;

	.childContainer {
		flex: 1 1 1;
		margin-left: 10px;
    
		.item {
			flex: '0 0 auto';
			width: '100%';

			img {
				width: 100%; /* 图片宽度填满列宽 */
				height: auto; /* 保持图片宽高比 */
			}
		}
	}
}

// 缓存计算，避免重复计算
	const calcRows = useCallback(() => {
		const gridContainerNode = gridContainer.current;
		if (gridContainerNode === null) return;

		const itemNodes = gridContainerNode.querySelectorAll(`.${style.item}`);
		const cols =
			getComputedStyle(gridContainerNode).gridTemplateColumns.split(' ').length;
		// 计算每个项目占据的位置
		itemNodes.forEach((item, index) => {
			const gapRows = index >= cols ? 8 : 0;
			const rows = Math.ceil((item.clientHeight + gapRows) / 10);
			(item as HTMLDivElement).style.gridRowEnd = `span ${rows}`;
		});
	}, []);

const gridTypeRender = (options: WaterfallProps) => {
	const {items = []} = options;
	const gridContainer = useRef<HTMLDivElement>(null);
	const [imagesLoaded, setImagesLoaded] = useState(false);

	// 缓存计算，避免重复计算
	const calcRows = useCallback(() => {
		const gridContainerNode = gridContainer.current;
		if (gridContainerNode === null) return;

		const itemNodes = gridContainerNode.querySelectorAll(`.${style.item}`);
		const cols =
			getComputedStyle(gridContainerNode).gridTemplateColumns.split(' ').length;
		// 计算每个项目占据的位置
		itemNodes.forEach((item, index) => {
			const gapRows = index >= cols ? 8 : 0;
			const rows = Math.ceil((item.clientHeight + gapRows) / 10);
			(item as HTMLDivElement).style.gridRowEnd = `span ${rows}`;
		});
	}, []);

	useEffect(() => {
		// 确保图片加载完成后再去计算布局
		if (imagesLoaded) {
			calcRows();
			const handleResize = () => {
				// 浏览器空闲计算布局
				requestAnimationFrame(calcRows);
			};

			window.addEventListener('resize', handleResize);
			return () => {
				window.removeEventListener('resize', handleResize);
			};
		}
	}, [imagesLoaded, calcRows]);

	// 图片加载完成后再去计算布局，useCallback避免重复计算
	const handleImageLoad = useCallback(() => {
		const totalImages = items.length;
		let loadedImages = 0;

		return () => {
			loadedImages++;
			if (loadedImages === totalImages) {
				setImagesLoaded(true);
			}
		};
	}, [items.length]);

	const onLoad = handleImageLoad();

	return (
		<div className={style.gridContainer} ref={gridContainer}>
			{shuffleArray(items).map((image: UnsplashImage, index: number) => (
				<div key={`${image?.id}${index}`} className={style.item}>
					<img src={image.urls.full} alt={`Image ${index}`} onLoad={onLoad} />
				</div>
			))}
		</div>
	);
};

.gridContainer {
	display: grid;
	grid-auto-rows: 10px;
	grid-gap: 0 10px;
	grid-template-columns: repeat(4, 1fr);
	align-items: end;

	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f8f8fa;

		img {
			width: 100%; /* 图片宽度填满列宽 */
			height: auto; /* 保持图片宽高比 */
		}
	}
}

// 触底增加数据
	const handScorllAddData = async () => {
		const scrollTop = document.documentElement.scrollTop;
		const clientHeight = document.documentElement.clientHeight;
		const scrollHeight = document.body.scrollHeight;
		const buffer = 50; // 缓冲区距离
		console.log(
			`Scroll Top: ${scrollTop}, Client Height: ${clientHeight}, Scroll Height: ${scrollHeight}`,
		);

		if (scrollTop + clientHeight >= scrollHeight - buffer && !loading) {
			loading = true;
			console.log('触底，开始加载数据...');
			await getData(5);
			loading = false;
			console.log('数据加载完成');
		}
	};

export class WaterFall {
	gap: number; // 间距
	container: HTMLDivElement; // 容器
	heightArr: number[]; // 保存每列的高度信息
	items: HTMLCollection; // 子节点
	renderIndex: number; // 保存已经渲染了的节点
	constructor(container: HTMLDivElement, options: {gap: number}) {
		this.gap = options?.gap ?? 0; // 间距
		this.container = container; // 容器
		this.heightArr = []; // 保存每列的高度信息
		this.items = container.children; // 子节点
		this.renderIndex = 0;
		this.container.addEventListener('resize', () => {
			this.heightArr = [];
			this.layout();
		});
		// 监听节点生成和卸载
		this.container.addEventListener('DOMSubtreeModified', () => {
			this.layout();
		});
	}

	getMaxHeight(heightArr: number[]) {
		let maxHeight = heightArr[0];
		for (let i = 1; i < heightArr.length; i++) {
			if (heightArr[i] > maxHeight) {
				maxHeight = heightArr[i];
			}
		}
		return maxHeight;
	}

	// 计算高度最小的列
	getMinIndex(heightArr: number[]) {
		let minIndex = 0;
		let min = heightArr[minIndex];
		for (let i = 1; i < heightArr.length; i++) {
			if (heightArr[i] < min) {
				min = heightArr[i];
				minIndex = i;
			}
		}
		return minIndex;
	}

	layout() {
		if (this.items.length === 0) return;
		const gap = this.gap;
		const pageWidth = this.container?.offsetWidth || 1000;
		const itemWidth = (this.items[0] as HTMLDivElement).offsetWidth;
		const columns = Math.ceil(pageWidth / (itemWidth + gap)) ?? 5; // 总共有多少列

		// 增量加载
		while (this.renderIndex < this.items.length) {
			let top, left;
			const curItem = this.items[this.renderIndex] as HTMLDivElement;
			const curImgItem = curItem.children[0] as HTMLImageElement;
			// 之前插入的时候我们给item设置了默认值，这我们需要将图片高度设置给item
			curItem.style.height = curImgItem.offsetHeight + 'px';
			curItem.style.width = curImgItem.offsetWidth + 'px';
			if (this.renderIndex < columns) {
				// 第一列
				top = 0;
				left = (itemWidth + gap) * this.renderIndex;
				this.heightArr[this.renderIndex] = curImgItem.offsetHeight;
			} else {
				// 找到高度最小的一列
				const minIndex = this.getMinIndex(this.heightArr);
				// 属于那一列，获取第一个元素，要获取left
				const whichColumnFirstItem = this.items[minIndex] as HTMLDivElement;

				top = this.heightArr[minIndex] + gap;
				left = whichColumnFirstItem.offsetLeft;
				// 重新计算当前插入列的高度
				this.heightArr[minIndex] += curImgItem.offsetHeight + gap;
			}

			curItem.style.top = top + 'px';
			curItem.style.left = left + 'px';
			this.renderIndex++;
		}
	}
}

const jsTypeRender = (options: WaterfallProps) => {
	let loading = false;
	const {items = []} = options;
	const jsContainer = useRef<HTMLDivElement>(null);

	// 获取1-400之间的任意高度
	const getRandomHeight = (min = 1, max = 4) => {
		return (Math.floor(Math.random() * (max - min + 1)) + min) * 100;
	};

	// 生成随机的柔和颜色
	const getRandomColor = () => {
		const hue = Math.floor(Math.random() * 360); // 0到360度
		const saturation = Math.floor(Math.random() * 20) + 70; // 70%到90%的饱和度
		const lightness = Math.floor(Math.random() * 20) + 70; // 70%到90%的亮度
		return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
	};

	// 模拟异步请求数据
	async function getData(num = 5) {
		console.log('✅ ~ 请求数据num:', num);
		const jsContainerNode = jsContainer.current;
		if (jsContainerNode === null) return;
		const images = (await fetchRandomImage(num)) as UnsplashImage[];
		for (let i = 0; i < images.length; i++) {
			const div = document.createElement('div');
			div.className = `${style.jsItem}`;
			const img = new Image();
			img.src = images[i].urls.full;
			// 等待图片加载完成，将图片依次插入到容器中
			img.onload = () => {
				const fragment = document.createDocumentFragment();
				div.className = `${style.jsItem}`;
				div.style.height = getRandomHeight(4, 1) + 'px';
				div.style.backgroundColor = getRandomColor(); // 设置随机颜色
				div.style.backgroundColor = getRandomColor(); // 设置随机颜色
				div.appendChild(img);
				fragment.appendChild(div);
				jsContainerNode.appendChild(fragment);
			};
			img.onerror = () => {
				console.error('Image failed to load');
			};
		}
	}

	// 触底增加数据
	const handScorllAddData = async () => {
		const scrollTop = document.documentElement.scrollTop;
		const clientHeight = document.documentElement.clientHeight;
		const scrollHeight = document.body.scrollHeight;
		const buffer = 50; // 缓冲区距离
		console.log(
			`Scroll Top: ${scrollTop}, Client Height: ${clientHeight}, Scroll Height: ${scrollHeight}`,
		);

		if (scrollTop + clientHeight >= scrollHeight - buffer && !loading) {
			loading = true;
			console.log('触底，开始加载数据...');
			await getData(5);
			loading = false;
			console.log('数据加载完成');
		}
	};

	// 先获取20条数据
	useEffect(() => {
		getData(20);
	}, []);

	// 渲染绘制
	useEffect(() => {
		const jsContainerNode = jsContainer.current;
		if (jsContainerNode === null) return;
		const water = new WaterFall(jsContainerNode, {gap: 10});
		water.layout();
	}, [items]);

	// 触底增加
	useEffect(() => {
		const onScroll = () => {
			console.log('滚动事件触发');
			handScorllAddData();
		};

		window.addEventListener('scroll', onScroll);

		return () => {
			window.removeEventListener('scroll', onScroll);
		};
	}, []);

	return <div className={style.jsContainer} ref={jsContainer}></div>;
};

.jsContainer {
	position: relative;
	width: 900px;

	.jsItem {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200px;
		margin-bottom: 10px;
		overflow: hidden;
		color: white;
		font-size: 18px;
		background: rgb(236 146 10);
		transition: all 0.1s;

		.jsTag {
			position: absolute;
			top: 2px;
			left: 2px;
			color: white;
		}

		img {
			width: 100%;
			height: auto;
		}
	}
}