[{isys_group name="tom.popup.category-folders.move-item"}]
<div id="category-folders-popup_move-item">
    <div class="modal-header">
        <h1>[{$headline}]</h1>
        <button type="button" class="btn btn-secondary popup-closer ml-auto" title="[{isys type="lang" ident="LC__POPUP__CLOSE"}]" data-tooltip="1">
            <img class="fr mouse-pointer" alt="" src="[{$dir_images}]axialis/user-interface/window-control-close.svg" />
        </button>
    </div>

    <div class="modal-content p20">
        <p>[{isys type="lang" ident="LC__CATEGORY_FOLDERS__POPUP__MOVE_ELEMENT__DESCRIPTION"}]</p>

        <div class="mb15 display-flex align-items-center mt10 mb15">
            <button type="button" class="btn btn-secondary" data-function="toggle-all" data-action="expand">
                <img src="[{$dir_images}]axialis/user-interface/angle-right-small.svg" alt="" /><span>[{isys type="lang" ident="LC__CATEGORY_FOLDERS__EXPAND_ALL"}]</span>
            </button>

            <div class="category-folders-search-container hide">
                <input type="text" class="input input-small" placeholder="[{isys type="lang" ident="LC__UNIVERSAL__SEARCH"}]" />
                <img src="[{$dir_images}]axialis/basic/zoom.svg" alt="" />
            </div>
        </div>

        <div class="category-folders-config">
            <!-- Will be filled by JS -->
        </div>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn move-button mr5">
            <img src="[{$dir_images}]axialis/documents-folders/folder-copy-2-grey.svg" alt="" /><span>[{isys type="lang" ident="LC__CATEGORY_FOLDERS__POPUP__SELECT_FOLDER__MOVE"}]</span>
        </button>
        <button type="button" class="btn popup-closer">
            <img src="[{$dir_images}]axialis/basic/symbol-cancel.svg" alt="" /><span>[{isys type="lang" ident="LC__UNIVERSAL__BUTTON_CANCEL"}]</span>
        </button>
    </div>
</div>

<script type="text/javascript">
    (function () {
        "use strict";

        // #category-tree is the "main" tree and will be used for callbacks.
        const $categoryTree = $('category-tree');

        const $popup = $('category-folders-popup_move-item');
        const $moveButton = $popup.down('.move-button');
        const $treeContainer = $popup.down('.category-folders-config');
        const $toggleAllButton = $popup.down('[data-function="toggle-all"]');
        const $searchCategoryField = $popup.down('.category-folders-search-container');
        const data = JSON.parse('[{$data|json_encode|escape:"javascript"}]');

        preventAccidentalFormSubmit($popup);

        const tree = new CategoryFoldersTree($treeContainer, {
            $toggleAll: $toggleAllButton,
            $searchCategoryField: $searchCategoryField,
            selectable: true,
            selection: data.currentParentId,
            preventSelectionOf: Array.isArray(data.items) ? data.items : (data.isFolder ? data.itemId : null)
        });

        new Ajax.Request('[{$loadConfigUrl}]', {
            method:     'get',
            onComplete:  function (xhr) {
                if (!is_json_response(xhr, true)) {
                    return;
                }

                const json = xhr.responseJSON;

                if (!json.success) {
                    idoit.Notify.error(json.message, { sticky: true });
                    return;
                }

                tree.setData(json.data.categories);
                tree.render();
            }
        });

        $popup.on('click', '.popup-closer', function () {
            Modal.close($popup.up('.modal'));
        });

        $moveButton.on('click', function () {
            const selectedFolder = $popup.down('input:checked');

            if (!selectedFolder) {
                idoit.Notify.info('[{isys type="lang" ident="LC__CATEGORY_FOLDERS__POPUP__SELECT_FOLDER__SELECT_TARGET_FOLDER"}]');
                return;
            }

            if (!$categoryTree) {
                idoit.Notify.info('[{isys type="lang" ident="LC__CATEGORY_FOLDERS__POPUP__SELECT_FOLDER__TARGET_FIELD_MISSING"}]');
                return;
            }

            if (data.returnAsMemo && $(data.returnAsMemo)) {
                $(data.returnAsMemo)
                    .fire('update:position', {
                        selectedParent: +selectedFolder.getValue(),
                        isRoot:         ('[{$rootId}]' == selectedFolder.getValue())
                    });
                Modal.close($popup.up('.modal'));
                return;
            }

            new Ajax.Request(idoit.Router.getRoute('pro.category-folders.move-item'), {
                method:     'post',
                parameters: {
                    configurationId: data.configurationId,
                    parentId: +selectedFolder.getValue(),
                    categoryId: data.isCategory ? data.itemId : null,
                    folderId: data.isFolder ? data.itemId : null,
                    newItem: data.newItem,
                    newItemType: data.newItemType
                },
                onComplete:  function (xhr) {
                    if (!is_json_response(xhr, true)) {
                        return;
                    }

                    const json = xhr.responseJSON;

                    if (!json.success) {
                        idoit.Notify.error(json.message, { sticky: true });
                        return;
                    }

                    // @todo  Ajax request to move item, then reload the tree.
                    $categoryTree.fire('reload:structure');
                    Modal.close($popup.up('.modal'));
                }
            });
        });
    })();
</script>
[{/isys_group}]
