//指定エリア内に要素を追従させ積み重ねる関数
const areaFixedText = () => {
	//エリアチェック
	const areas = document.querySelectorAll('.js-fixed-text__area');
	if(areas.length === 0) {
		return;
	}

	//追従チェック関数
	const checkFixed = (targets,area) => {
		//ブロックごとの高さを取得
		const height = [];
		targets.forEach(target => {
			target.style.paddingTop = '';
			target.style.paddingBottom = '';
			height.push(target.offsetHeight);
		});
		const heightLen = height.length;

		//追従エリアの情報を取得
		const areaPosi = area.getBoundingClientRect().top;
		const areaHeight = area.clientHeight;
		//追従の終了ポイント
		const endPosi = areaPosi + areaHeight;

		//ブロックごとの処理
		targets.forEach((target, index) => {
			//ブロックのtop位置設定
			let topHeight = 0;
			if(index === 1) {
				topHeight = height[0];

			} else if(index > 1) {
				topHeight = height.slice(0,index);
				topHeight = topHeight.reduce((a, x) => a + x);
			}
			target.style.paddingTop = topHeight + 'px';

			//ブロックのbottom位置設定
			let bottomHeight = 0;
			if(index !== heightLen - 1) {
				bottomHeight = height.slice(index+1,heightLen);
				bottomHeight = bottomHeight.reduce((a, x) => a + x);
				target.style.paddingBottom = bottomHeight + 'px';
			}

			//要素の位置と高さを取得
			let targetHeight = target.clientHeight;
			const parent = target.parentNode;
			const parentPosi = parent.getBoundingClientRect().top;
			const startPosi = parent.getBoundingClientRect().top;
			parent.style.height = '';
			const parentHeight = parent.clientHeight;
			if(targetHeight > parentHeight) {
				parent.style.height = targetHeight + 'px';
			}

			//エリア内の処理
			if(0 > startPosi && targetHeight < endPosi) {
				target.classList.add('is-fixed');
				target.style.top = '';

			//エリアより上の処理
			} else if(0 <= startPosi) {
				target.classList.remove('is-fixed');
				target.style.top = '';

			//エリアより下の処理
			} else {
				target.classList.remove('is-fixed');

				//停止位置を設定
				topHeight = 0;
				if(index < heightLen - 1) {
					topHeight = height.slice(index + 1,heightLen);
					topHeight = topHeight.reduce((a, x) => a + x);
				}
				target.style.top = (areaHeight - ((-areaPosi) - (-parentPosi)) - targetHeight + bottomHeight - topHeight) + 'px';
			}
		});
	}


	//エリアごとに処理
	areas.forEach(area => {
		//エリア内に追従要素が存在する場合のみ処理する
		const targets = area.querySelectorAll('.js-fixed-text__item');
		if(targets.length > 0) {
			/*
				要素が画面内に入ったら処理
			*/
			const listener = {
				handleEvent: () => {
					checkFixed(targets,area);
				}
			};
			const observer = new IntersectionObserver(entries => {
				entries.forEach(entry => {
					if(entry.isIntersecting) {
						//画面に表示されているエリアのみスクロールイベント発火
						window.addEventListener('scroll', listener, {passive: true});

					} else {
						//画面外のときはスクロールイベント削除
						window.removeEventListener('scroll', listener, {passive: true});
					}
				});
			});
			//observer監視開始
			observer.observe(area);

			/*
				レスポンシブ対応
			*/
			//表示エリアリサイズ監視 ResizeObserver
			const resizeObserver = new ResizeObserver(() => {
				checkFixed(targets,area);
			});
			//リサイズ監視開始
			resizeObserver.observe(area);
		}
	});
}
areaFixedText();