var LOCKABLE_CLASS = '.dropdown-toggle.s-lockable';
var DISABLED_ATTRIBUTE = 'disabled';
var BUTTON_MENU_MODULE_CLASS = '.m-button-menu';
var BUTTON_ELEMENT = 'button';
var ASYNC_LOADER_MODULE_CLASS = '.m-async-loader';

/**
 * @description A variable used for purposes of namespacing functions.
 * @example manageRoster.onDetailLoadComplete();
 */
var manageRoster = {
    /**
     * @description Fired when keys are pressed in the search box on the manage roster component.
     *              Prevents default functionality when the enter key is pressed to prevent a standard HTML submit action.
     * @param e The event being fired.
     */
    onSearchKeyPress: function(e) {
        // 13 is the keycode for enter.
        if (e.keyCode === 13) {
            e.preventDefault();
            performSearch();
        }
    },

    /**
     * @description Fired when the loading action for a "detail" view is begun.
     *              Handles locking the expand buttons on the page.
     */
    onDetailLoadStart: function(whichButtonClicked) {
        var parentMenu = jQuery(whichButtonClicked).closest(BUTTON_MENU_MODULE_CLASS);
        var parentButton = parentMenu.find(BUTTON_ELEMENT);
        var parentLoader = parentMenu.find(ASYNC_LOADER_MODULE_CLASS);

        // Hiding the ellipses menu and showing the loader.
        parentButton.hide();
        parentLoader.show();

        // Lock other buttons while loading.
        jQuery(LOCKABLE_CLASS).prop(DISABLED_ATTRIBUTE, true);
    },

    /**
     * @description Fired when the loading action for a "detail" view is completed. Handles moving markup to the right
     *              side column of the page for the detail card.
     */
    onDetailLoadComplete: function(whichButtonClicked) {
        var parentMenu = jQuery(whichButtonClicked).closest(BUTTON_MENU_MODULE_CLASS);
        var parentButton = parentMenu.find(BUTTON_ELEMENT);
        var parentLoader = parentMenu.find(ASYNC_LOADER_MODULE_CLASS);

        // Showing the ellipses menu and hiding the loader.
        parentButton.show();
        parentLoader.hide();

        // If we are not on a template which has the right column, don't relocate the detail card.
        if (!(jQuery('.l-right-column').length)) {
            return;
        }

        // Select the element we're going to be interacting with.
        var accountDetailView = jQuery('.m-account-detail-view');

        // Relocate the detail card to the right column.
        accountDetailView.appendTo('.l-right-column');

        // Calculate the width for the affix (https://github.com/twbs/bootstrap/issues/6350)
        var affixWidth = accountDetailView.width();

        // Affix for fixed positioning,
        accountDetailView.affix({
            offset: {
                top: accountDetailView.offset().top
            }
        });

        // Re-set width to initial value.
        accountDetailView.width(affixWidth);

        // Unlock the expand buttons on the page.
        jQuery(LOCKABLE_CLASS).prop(DISABLED_ATTRIBUTE, false);
    }
};