"use strict";

const React = require("react");
const throttleit = require("throttleit");
const classnames = require("classnames");

const Window = require("../window");

module.exports = function Sidebar({elementRef, side, windows, onMouseOver, onMouseOut, highlight, onStartMove, onStartBottomResize, onClose, onFocus, onRecalculateWindowPosition, onWindowRef}) {
	let [onScroll, setOnScroll] = React.useState(null);

	React.useEffect(() => {
		onScroll = throttleit(() => {
			windows.forEach((window_) => {
				onRecalculateWindowPosition(window_.id);
			});
		}, 100);

		/* NOTE: Lazy initializer */
		setOnScroll(() => {
			return onScroll;
		});
	}, [windows]);

	function onMouseOverHandler(event) {
		onMouseOver(event, side);
	}

	function onMouseOutHandler(event) {
		onMouseOut(event, side);
	}

	function trackRef(windowId) {
		return function (ref) {
			onWindowRef(windowId, ref);

			if (ref != null) {
				onRecalculateWindowPosition(windowId);
			}
		};
	}

	return (
		<div ref={elementRef} className={classnames("sidebar", `side-${side}`, {highlight: highlight})} onMouseOver={onMouseOverHandler} onMouseOut={onMouseOutHandler} onScroll={onScroll}>
			{windows.map((window_) => {
				let windowStyle = {
					width: window_.width,
					height: window_.height,
					/* The below is a bit of a hack to ensure that a being-dragged window always displays with coordinates absolute to the page, not relative to the sidebar. */
					position: (window_.isMoving) ? "fixed" : "static"
				};

				let handlers = {
					onTitleMouseDown: (event) => {
						onStartMove(window_, event);
					},
					onResizerMouseDown: (event) => {
						onStartBottomResize(window_, event);
					},
					onMouseDown: () => {
						onFocus(window_);
					},
					onClose: () => {
						onClose(window_);
					}
				};

				return (
					<Window elementRef={trackRef(window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="vertical" {...handlers} />
				);
			})}
		</div>
	);
};