/* nav-resize.js */

/* --- Constants --- */
const DEFAULT_WIDTH_PERCENT = 0.25; // 25% of page width
const MAX_NAV_WIDTH = 700;
const SNAP_COLLAPSE_THRESHOLD = 50;

// --- Session storage keys for persisting nav width/state ---
const SESSION_WIDTH_KEY = "sidenav-width";
const SESSION_COLLAPSED_KEY = "sidenav-collapsed";

/* --- Internal state --- */
let isCollapsed = false;

/* --- Utility --- */
function getDefaultWidthPx() {
	return Math.round(window.innerWidth * DEFAULT_WIDTH_PERCENT);
}

function setNavPaneWidth(px) {
	const navPane = document.getElementsByClassName('sidenav-wrapper')[0];
	if (navPane) {
		navPane.style.width = px + "px";
	}
}

/* --- Drag resize (mousemove) --- */
function resize(e) {
	const navPane = document.getElementsByClassName('sidenav-wrapper')[0];
	const layout = document.getElementsByClassName('sidenav-layout')[0];
	if (!navPane || !layout) return;

	const layoutRect = layout.getBoundingClientRect();
	let newWidth = e.clientX - layoutRect.left;

	// Clamp width: minimum = 25% viewport, maximum = 700
	newWidth = Math.max(getDefaultWidthPx(), Math.min(newWidth, MAX_NAV_WIDTH));

	navPane.style.transition = ""; // NEVER animate during drag
	setNavPaneWidth(newWidth);

	isCollapsed = false;

	// --- Session persistence ---
	sessionStorage.setItem(SESSION_WIDTH_KEY, newWidth);
	sessionStorage.setItem(SESSION_COLLAPSED_KEY, "false");
}

/* --- Snap decision AFTER drag ends --- */
function handleResizeEnd() {
	const navPane = document.getElementsByClassName('sidenav-wrapper')[0];
	if (!navPane) return;

	const width = navPane.getBoundingClientRect().width;

	if (width < SNAP_COLLAPSE_THRESHOLD) {
		navPane.style.transition = "width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)";
		navPane.style.width = "0px";
		isCollapsed = true;

		// --- Session persistence ---
		sessionStorage.setItem(SESSION_WIDTH_KEY, 0);
		sessionStorage.setItem(SESSION_COLLAPSED_KEY, "true");

		navPane.addEventListener("transitionend", function handler() {
				navPane.style.transition = "";
				navPane.removeEventListener("transitionend", handler);
			});
	}
}

/* --- Add resize bar --- */
function addNavBorder() {
	const layout = document.getElementsByClassName('sidenav-layout')[0];
	if (!layout) return;

	const navBorder = document.createElement('div');
	navBorder.classList.add('nav-border');
	layout.appendChild(navBorder);

	navBorder.addEventListener("mousedown", function () {
			document.addEventListener("mousemove", resize);
			document.addEventListener(
				"mouseup",
				function () {
					document.removeEventListener("mousemove", resize);
					handleResizeEnd();
				},
				{ once: true }
				);
		});
}

/* --- Collapse / expand button --- */
function toggleNavPane() {
	const navPane = document.getElementsByClassName('sidenav-wrapper')[0];
	if (!navPane) return;

	navPane.style.transition = "width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)";

	if (isCollapsed) {
		const width = getDefaultWidthPx();
		navPane.style.width = width + "px";
		isCollapsed = false;

		// --- Session persistence ---
		sessionStorage.setItem(SESSION_WIDTH_KEY, width);
		sessionStorage.setItem(SESSION_COLLAPSED_KEY, "false");
	} else {
		navPane.style.width = "0px";
		isCollapsed = true;

		// --- Session persistence ---
		sessionStorage.setItem(SESSION_WIDTH_KEY, 0);
		sessionStorage.setItem(SESSION_COLLAPSED_KEY, "true");
	}

	navPane.addEventListener("transitionend", function handler() {
			navPane.style.transition = "";
			navPane.removeEventListener("transitionend", handler);
		});
}

/* --- Add collapse button --- */
function addNavCollapseButton() {
	const navBorder = document.getElementsByClassName('nav-border')[0];
	if (!navBorder) return;

	const btn = document.createElement('div');
	btn.classList.add('nav-collapse-btn');

	btn.addEventListener("click", function (e) {
			e.stopPropagation();
			toggleNavPane();
		});

	navBorder.appendChild(btn);
}

/* --- Page load: restore session state --- */
function retainNavPaneWidth() {
	const storedWidth = sessionStorage.getItem(SESSION_WIDTH_KEY);
	const storedCollapsed = sessionStorage.getItem(SESSION_COLLAPSED_KEY) === "true";

	if (storedWidth !== null) {
	setNavPaneWidth(parseInt(storedWidth, 10));
	isCollapsed = storedCollapsed;
	} else {
const width = getDefaultWidthPx();
setNavPaneWidth(width);
isCollapsed = false;
	}
}

	/* --- Init --- */
	$(document).ready(function () {
		retainNavPaneWidth();
		addNavBorder();
		addNavCollapseButton();
	});