<?php
/** @var \Solwin\Verticalmenu\Block\Adminhtml\Menu\Edit\Form $block */
$parentId = $block->getParentMenuId();
$menuId = $block->getMenuId();
?>
<div class="menu-edit-title">
    <h3 class="title"><?php echo $block->escapeHtml($block->getHeader()) . ($block->getMenuId() ? ' (' . __('ID: %1', $block->getMenuId()) . ')' : '') ?></h3>
</div>
<div data-mage-init='{"floatingHeader": {}}' class="page-actions">
    <?php echo $block->getAdditionalButtonsHtml(); ?>
</div>
<?php echo $block->getTabsHtml() ?>

<iframe name="iframeSave" style="display:none; width:100%;"
        src="<?php echo $block->getViewFileUrl('blank.html') ?>"></iframe>
<form id="menu_edit_form" name="menu-edit-form" action="<?php echo $block->getSaveUrl() ?>" method="post"
      enctype="multipart/form-data">
    <div class="no-display">
        <input type="hidden" name="isIframe" value="1"/>
        <input name="form_key" type="hidden" value="<?php echo $block->getFormKey() ?>"/>
        <input type="hidden" name="active_tab_id" id="active_tab_id" value=""/>
        <?php if ($parentId !== 0): ?>
            <input type="hidden" name="parent" value="<?php echo $parentId; ?>"/>
        <?php endif; ?>
        <?php if ($menuId !== 0): ?>
            <input type="hidden" name="menu_id" value="<?php echo $menuId; ?>"/>
        <?php endif; ?>
    </div>
    <div id="menu_tab_content"></div>
</form>

<div data-id="information-dialog-category" class="messages" style="display: none;">
    <div class="message message-notice">
        <div><?php echo __('This operation can take a long time'); ?></div>
    </div>
</div>

<script>
require(['jquery', 'jquery/ui', "mage/mage", "mage/translate"], function($){
    var mageDialog = (function($) {
        var self = {dialogOpened: false, callback: [], needShow: false};

        self.callback = {ok: [], cancel: []};
        self.createDialog = function () {
            var onEvent = function (type, dialog) {
                self.callback[type].forEach(function(call) {
                    call();
                });
                $(dialog).dialog( "close" );
            };

            self.dialog = $('[data-id="information-dialog-menu"]').dialog({
                autoOpen:   false,
                modal:      true,
                dialogClass: 'popup-window',
                resizable: false,
                width: '75%',
                title: $.mage.__('Warning message'),
                buttons: [{
                    text: $.mage.__('Ok'),
                    'class': 'action-primary',
                    click: function () {
                        onEvent('ok', this);
                    }
                }, {
                    text: $.mage.__('Cancel'),
                    'class': 'action-close',
                    click: function () {
                        onEvent('cancel', this);
                    }
                }],
                open: function () {
                    $(this).closest('.ui-dialog').addClass('ui-dialog-active');

                    var topMargin = $(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() + 30;
                    $(this).closest('.ui-dialog').css('margin-top', topMargin);

                    self.dialogOpened = true;
                    self.callback.ok.push(function() {
                        self.needShow = false;
                    });
                },
                close: function(event, ui) {
                    $(this).dialog('destroy');
                    self.dialogOpened = false;
                    self.callback = {ok: [], cancel: []};
                    delete self.dialog;
                }
            });
        };

        return {
            needToShow: function() {
                self.needShow = true &&
                    !!$('[data-ui-id="tabs-tab-general-information-fieldset-element-hidden-general-id"]').length;
                return this;
            },
            isNeedShow: function() {
                return self.needShow;
            },
            onOk: function(call) {
                self.callback.ok.push(call);
                return this;
            },
            onCancel: function(call) {
                self.callback.cancel.push(call);
                return this;
            },
            show: function() {
                if (self.dialog == undefined) {
                    self.createDialog();
                }
                if (self.dialogOpened ==  false) {
                    self.dialog.dialog('open');
                }
                return this;
            }
        };
    })(jQuery);
    $(document).on('change', '[data-ui-id="urlkeyrenderer-text-general-url-key"]', function() {
        mageDialog.needToShow();
    });
    $('#menu_edit_form')
        .mage('menuForm', {refreshUrl: '<?php echo $block->getRefreshPathUrl() ?>'})
        .mage('validation', {submitHandler: function(form){
            if (mageDialog.isNeedShow()) {
                mageDialog.onOk(function() {
                    form.submit();
                    displayLoadingMask();
                }).show();
            } else {
                form.submit();
                displayLoadingMask();
            }
        }});
});

<?php if ($block->isAjax() && ($tabsBlock = $block->getLayout()->getBlock('tabs')) && ($_tabsJsObject = $tabsBlock->getJsObjectName())): ?>
    // Temporary solution, will be replaced after refactoring of manage category functionality
    <?php $tabsBlock = $block->getLayout()->getBlock('tabs'); ?>
    require(["jquery","mage/backend/tabs"],function($){
        var activeAnchor = $('#<?php echo $tabsBlock->getId() ?>').tabs('activeAnchor');
        if (activeAnchor.length) {
            $('active_tab_id').value = activeAnchor.prop('id');
        }
        $('active_tab_id').tabsJsObject = $('#<?php echo $tabsBlock->getId() ?>');
    });
<?php endif; ?></script>
