import "./common.js";
import "./pagination.js";
//#region js/download.js
function setActiveNav() {
	const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav");
	if (!pageNav) return;
	document.querySelectorAll(".site-header__nav a").forEach((link) => {
		const active = link.textContent.trim().startsWith(pageNav);
		link.classList.toggle("is-active", active);
	});
}
$(function() {
	setActiveNav();
	const activateTab = ($btn) => {
		$btn.addClass("is-active").attr("aria-selected", "true");
		$(".d-tabs__item").not($btn).removeClass("is-active").attr("aria-selected", "false");
	};
	const closeDropdowns = () => {
		$("[data-dropdown]").prop("hidden", true);
		$("[data-dropdown-trigger]").removeClass("is-open").attr("aria-expanded", "false");
	};
	const getActiveTabId = () => {
		const $active = $(".d-tabs__item.is-active").first();
		const $group = $active.closest(".d-tabs__group");
		if ($group.length) {
			const $activeChild = $group.find(".d-tabs__dropdown-item.is-active[data-tab]").first();
			if ($activeChild.length) return $activeChild.attr("data-tab") || "";
		}
		return $active.attr("data-tab") || "";
	};
	const getKeywords = () => $("[data-tab-search] [name='keywords']").val().trim();
	const buildQueryUrl = ({ tabId = getActiveTabId(), keywords = getKeywords() } = {}) => {
		const params = new URLSearchParams();
		if (tabId) params.set("cid", tabId);
		if (keywords) params.set("keywords", keywords);
		const query = params.toString();
		return query ? `${window.location.pathname}?${query}` : window.location.pathname;
	};
	const activateTabById = (tabId) => {
		if (!tabId) return;
		const $dropdownItem = $(`.d-tabs__dropdown-item[data-tab="${tabId}"]`).first();
		if ($dropdownItem.length) {
			$(".d-tabs__dropdown-item").removeClass("is-active");
			$dropdownItem.addClass("is-active");
			const $trigger = $dropdownItem.closest(".d-tabs__group").find("[data-dropdown-trigger]");
			$trigger.find("span").text($dropdownItem.text());
			activateTab($trigger);
			return;
		}
		$(".d-tabs__dropdown-item").removeClass("is-active");
		const $target = $(`.d-tabs__item[data-tab="${tabId}"]`).first();
		if ($target.length) activateTab($target);
	};
	$(".d-tabs__item:not([data-dropdown-trigger])").on("click", function() {
		$(".d-tabs__dropdown-item").removeClass("is-active");
		activateTab($(this));
		closeDropdowns();
	});
	$("[data-dropdown-trigger]").on("click", function() {
		const $btn = $(this);
		const $dropdown = $btn.next("[data-dropdown]");
		if (!$dropdown.prop("hidden")) closeDropdowns();
		else {
			closeDropdowns();
			$btn.addClass("is-open").attr("aria-expanded", "true");
			$dropdown.prop("hidden", false);
		}
	});
	$(".d-tabs__dropdown-item").on("click", function() {
		const $item = $(this);
		$(".d-tabs__dropdown-item").removeClass("is-active");
		$item.addClass("is-active");
		const $trigger = $item.closest(".d-tabs__group").find("[data-dropdown-trigger]");
		$trigger.find("span").text($item.text());
		activateTab($trigger);
		closeDropdowns();
	});
	$(document).on("click", function(event) {
		if (!$(event.target).closest(".d-tabs__group").length) closeDropdowns();
	});
	$("[data-tab-search]").on("submit", function(event) {
		event.preventDefault();
		window.location.href = buildQueryUrl({
			tabId: getActiveTabId(),
			keywords: $(this).find('[name="keywords"]').val().trim()
		});
	});
	const searchParams = new URLSearchParams(window.location.search);
	const tabParam = searchParams.get("cid");
	const keywordsParam = searchParams.get("keywords");
	if (keywordsParam) $("[data-tab-search] [name='keywords']").val(keywordsParam);
	if (tabParam) activateTabById(tabParam);
});
//#endregion