<!DOCTYPE html>
<html th:replace="~{layout/layout.html :: layout(~{::head}, ~{::section})}"
      lang="ko" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>카테고리 편집 - Jinia's Log</title>
    <meta name="viewport" content="width=device-width,  user-scalable = no, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <link rel="icon" href="/img/favicon-16x16.png"/>
    <link rel="apple-touch-icon" href="/img/favicon-16x16.png"/>
    <link rel="icon" type="image/png" sizes="16x16"  href="/img/favicon-16x16.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">

    <!-- CSS RESET -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>
    <link rel="stylesheet" th:href="@{/node_modules/bootstrap/dist/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/mainCss.css?ver=1.1}"/>
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
    <script src="https://kit.fontawesome.com/233840a552.js" crossorigin="anonymous"></script>
</head>

<body>

<section>

    <div style="margin-bottom: 100px"></div>

    <div class="container">


        <h1 class="text-center">카테고리 편집</h1>
        <hr class="mb-5">

        <div class="row g-0">
        <div id="categoryBox" class="categoryBox list-group list-unstyled ps-0 d-flex flex-column col-sm mb-5 text-center"><th:block th:each="superCategory : ${category.getCategoryTCountList()}"><button class="list-group-item list-group-item-action list-group-item-light fw-bold"
                                                                                   th:text="|${superCategory.getTitle()}|"
                                                                                   th:id="|superCategory-${superCategory.getId()}|"
                                                                                   onclick="clickCategory(this)"></button><th:block
                th:each="subCategory : ${superCategory.getCategoryTCountList()}"><button class="list-group-item-action list-group-item-light list-group-item"
                                                                                      th:text="|${subCategory.getTitle()}|"
                                                                                      th:id="|subCategory-${subCategory.getId()}|"
                                                                                      onclick="clickCategory(this)"></button></th:block></th:block></div>

            <div class="col-sm g-0 ms-sm-5">
            <div class="mb-5 ">
                <label for="categoryName">카테고리 이름 변경</label>
                <input type="text" class="form-control" id="categoryName">
            </div>
            <div class="d-flex flex-column align-items-center">
                <div>
                    <button class="category-nav-btn " onclick="categoryUp()"><i class="fas fa-angle-up"></i></button>
                    <button class="category-nav-btn " onclick="categoryDown()"><i class="fas fa-angle-down"></i></i></button>
                </div>
                <div>
                    <button class="category-nav-btn " onclick="tierUp()"><i class="fas fa-chevron-left"></i></button>
                    <button class=" category-nav-btn " onclick="tierDown()"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div>
                    <button class=" category-nav-btn " onclick="addCategory()"><i class="fas fa-plus"></i></button>
                    <button class="category-nav-btn " onclick="deleteCategory()"><i class="fas fa-minus"></i></button>
                </div>
            </div>
        </div>
        </div>
    </div>

    <div class="container mt-5">
        <div class="row justify-content-center g-0">
        <button class="btn btn-secondary col-3 me-5" onclick="changeCategory()">적 용</button>
        <button class="btn btn-secondary col-3" onclick="javascript:history.back()">취 소</button>
        </div>
    </div>
    <div style="margin-bottom:  100px"></div>


    <script th:src="@{/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/getCsrf.js}"></script>
    <script th:inline="javascript">

        // 재사용할 dto
        const categorysList = [[${categoryForEdit}]];
        let idxNewCategoryNum = 0;
        const categoryName = document.getElementById("categoryName");

        // DIV 셀렉터
        let selector;
        // DTO 카테고리 셀렉터
        let category;

        // 카테고리명 유효성 검사
        function checkCategoryName(){
            const categoryList = document.getElementById("categoryBox").childNodes;
            for (let i = 0; i<categoryList.length; i++) {
                const curNode = categoryList[i];

                if(curNode.textContent === ""||curNode.textContent === " "){
                    alert("카테고리 명이 공백이면 안됩니다.");
                    return  true;
                }

                for(let j = i+1; j<categoryList.length; j++){
                    if(curNode.textContent === categoryList[j].textContent){
                        alert("카테고리 명이 중복되면 안됩니다.");
                        return  true;
                    }
                }
            }
            return false;
        }

        function clickCategory(div) {

            if(checkCategoryName()){
                return;
            }

            selector = div;
            categoryName.value = selector.innerText;
            category = categorysList.find(x => x.title === selector.innerText);
            const childNodes = selector.parentNode.childNodes;

            for (const childNode of childNodes) {
                childNode.classList.remove("active");
            }

            selector.classList.add("active");

        }

        categoryName.addEventListener("keyup", () => {
            selector.innerText = categoryName.value;
            category.title = selector.innerText;
        })

        function swapToPrevious(title){

            const index = categorysList.findIndex(x=>x.title === title);

            let tmp = categorysList[index-1];
            categorysList[index-1] = categorysList[index];
            categorysList[index] = tmp;
        }

        function swapToNextInDto(title){

            const index = categorysList.findIndex(x=>x.title === title);

            let tmp = categorysList[index+1];
            categorysList[index+1] = categorysList[index];
            categorysList[index] = tmp;
        }

        function categoryUp() {

            const categoryTitle = selector.innerText;

            // 선택 카테고리가 부모일때
            if (selector.previousSibling != null) {

                    swapToPrevious(categoryTitle);
                    selector.parentNode.insertBefore(selector, selector.previousSibling);

            }
        }

        function categoryDown() {

            const categoryTitle = selector.innerText;

            // 선택 카테고리가 부모일때
            if (selector.nextSibling.nextSibling != null) {

                swapToNextInDto(categoryTitle);
                selector.parentNode.insertBefore(selector, selector.nextSibling.nextSibling);
            }
            else if(selector.nextSibling.nextSibling == null) {
                    swapToNextInDto(categoryTitle);
                    selector.parentNode.appendChild(selector);
            }
        }

        function tierUp(){
            category.tier = 1;
            selector.classList.add("fw-bold");

        }

        function tierDown(){
            category.tier = 2;
            selector.classList.remove("fw-bold");
        }

        function addCategory(){
            const box = document.getElementById("categoryBox");
            box.innerHTML +=`<button class="list-group-item-action list-group-item-light list-group-item" onclick="clickCategory(this)">새 카테고리${idxNewCategoryNum}</button>`

            let newCategory = {};
            newCategory.id = null;
            newCategory.title = '새 카테고리'+idxNewCategoryNum++;
            newCategory.tier = 2;
            newCategory.count = 0;
            newCategory.porder = 0;
            newCategory.corder = 0;

            categorysList.push(newCategory);
        }

        function deleteCategory(){
            const categoryIndex = categorysList.findIndex(x=>x.title === selector.innerText);
            categorysList.splice(categoryIndex,1);
            selector.remove();
        }

        function changeCategory(){
            if(checkCategoryName()){
                return;
            }

            let token = getCsrfToken();
            const xhr = new XMLHttpRequest();
            xhr.open("POST", "/category/edit");
            xhr.setRequestHeader("content-type", "application/json");
            xhr.setRequestHeader("X-XSRF-TOKEN", token);
            xhr.send(JSON.stringify(categorysList));

            xhr.onload = () => {
                if (xhr.status === 200 || xhr.status === 201 || xhr.status === 202) {
                       location.href='/';
                }
                else{
                        alert(xhr.response);
                }
            }
        }

    </script>

</section>

</body>
</html>