<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<!-- inner page css -->
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/libs/jstree/jstree.css"/>" />
<!-- inner page html -->
<div class="content-wrapper">
	<!-- Content -->

	<div class="container-xxl flex-grow-1 container-p-y">
	    <%--h4 id="pageTitle" class="fw-bold py-3 mb-4">페이지 제목</h4--%>
		<c:set var="prefixName" scope="request">메뉴</c:set>
	    <!-- Page Body -->
		<div class="card">
		    <div class="card-datatable text-nowrap">
		        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
		        
					<div class="d-flex flex-row justify-content-evenly">
					
						<div style="width:49%;">
							<h5 class="mt-3">레이아웃</h5>
							<div id="menu-tree" class="main-left d-flex flex-column flex-grow-1">
								<div class="d-flex justify-content-between" style="padding-top:.5em; padding-bottom:.5em; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf;">
									<span>
										<button id="menuToggler" onclick="toggleMenus();" class="btn btn-primary"></button>
									</span>
								</div>
								<div id="menuTree" style="padding-top:1em; min-height:26em; overflow:auto;">
								</div>
							</div>
						</div>

						<div style="width:49%;">
							<h5 class="mt-3">등록 정보</h5>
							<div class="d-flex flex-row justify-content-end p-3">
								<div>
									<button id="btnRemoveMenus" onclick="removeMenus();" class="btn btn-primary">- 제거</button>
								</div>
							</div>
							<jsp:include page="menu-info.jsp" />
						</div>
					</div>
				</div>
			</div>
		</div>
	    <!-- Page Body -->

		<hr class="my-5" />
	</div>
  	<!-- / Content -->

	<jsp:include page="/WEB-INF/jsp/include/bottom.jsp" />

  	<div class="content-backdrop fade"></div>
</div>


<script>
var menuBranches = treeSupport({
	selector:"#menuTree",
	trace:wctx.trace,
	plugins: ["checkbox", "contextmenu", "dnd"] ,
	core:{check_callback:true,
	      multiple:false
		 },
	checkbox:{
		whole_node:false,
		tie_selection:false
	},
	contextmenu:{items:{
		newMenu:{label:"메뉴 추가", action:function(obj){
			var current = menuControl.getCurrent(),
				parentID = current.parentID;
			menuControl.newInfo({parentID:parentID});
			$("input[name='parentID']").val(parentID);
		}},
		newChildMenu:{label:"하위메뉴 추가", action:function(obj){
			var current = menuControl.getCurrent(),
				parentID = current.id;
			menuControl.newInfo({parentID:parentID});
			$("input[name='parentID']").val(parentID);
			log("current", menuControl.getCurrent());
		}},
	}},
	onNodeSelect:function(obj) {
		var key = obj[0];
		menuControl.setCurrent(key);
	},
	onNodeMove:function(obj) {
		var parentID = obj.parent,
			menuID = obj.node.id;
		if (parentID == "#")
			parentID = null;
		menuControl.move(parentID, menuID);
	},
	onNodeReorder:function(obj) {
		var parentID = obj.parent,
			menuID = obj.node.id,
			menuIDs = menuBranches.getChildIDs(parentID);
		menuControl.reorder(menuIDs);
	},
	onNodeCheck:function(obj) {
		var checked = obj.checked,
			menuID = obj.node.id;
		menuControl.select(menuID, checked);
	}
});

function toggleMenus() {
	$("#menuToggler").text(menuBranches.toggleFolding() == "collapsed" ? "+ 펼치기" : "- 닫기");
}

var menuControl = new MenuControl();

menuControl.onDatasetChange = obj => {
	menuBranches.setData(treeHtml(menuControl.menus, {
		id:function(e){return e.id;},
		text:function(e){
			return e.name == e.url ? e.name : e.name + (e.url ? " (" + e.url + ")" : "");
		}
	}));
	$("#btnSelectURL").prop("disabled", menuControl.dataset.empty);
}

menuControl.onCurrentChange = item => {
	menuControl.setInfo(item.data);
	menuBranches.selectNode(item.data.id);
}

menuControl.onSelectionChange = selected => {
	$("#btnRemoveMenus").prop("disabled", selected.length < 1);
}

menuControl.onMenusChanged = () => loadUserMenus();

${menuFunc}

async function loadUserMenus() {
	let userMenus = await menuControl.getUserMenus();
	setUserMenus(userMenus);
}

function removeMenus() {
	dialog.alert({
		content:"선택한 메뉴 정보를 삭제하시겠습니까?",
		onOK:() => menuControl.remove()
	});
}

$(function(){
	${onload}
	$("#menuToggler").text(menuBranches._folding == "collapsed" ? "+ 펼치기" : "- 닫기");
	menuControl.setData(${menus});
	menuBranches.open();
});
</script>