/* global $ */
import UIEvents from "../../../service/UI/UIEvents";

/**
 * Handles open and close of the extended toolbar side panel
 * (chat, settings, etc.).
 *
 * @type {{init, toggle, isVisible, hide, show, resize}}
 */
const SideContainerToggler = {
    /**
     * Initialises this toggler by registering the listeners.
     *
     * @param eventEmitter
     */
    init(eventEmitter) {
        this.eventEmitter = eventEmitter;

        // Adds a listener for the animation end event that would take care
        // of hiding all internal containers when the extendedToolbarPanel is
        // closed.
        document.getElementById("sideToolbarContainer")
            .addEventListener("animationend", function(e) {
                if(e.animationName === "slideOutExt")
                    $("#sideToolbarContainer").children().each(function() {
                        if ($(this).hasClass("show"))
                            SideContainerToggler.hideInnerContainer($(this));
                    });
            }, false);
    },

    /**
     * Toggles the container with the given element id.
     *
     * @param {String} elementId the identifier of the container element to
     * toggle
     */
    toggle(elementId) {
        let elementSelector = $(`#${elementId}`);
        let isSelectorVisible = elementSelector.hasClass("show");

        if (isSelectorVisible) {
            this.hide();
        }
        else {
            if (this.isVisible())
                $("#sideToolbarContainer").children().each(function() {
                    if ($(this).id !== elementId && $(this).hasClass("show"))
                        SideContainerToggler.hideInnerContainer($(this));
                });

            if (!this.isVisible())
                this.show();

            this.showInnerContainer(elementSelector);
        }
    },

    /**
     * Returns {true} if the side toolbar panel is currently visible,
     * otherwise returns {false}.
     */
    isVisible() {
        return $("#sideToolbarContainer").hasClass("slideInExt");
    },

    /**
     * Returns {true} if the side toolbar panel is currently hovered and
     * {false} otherwise.
     */
    isHovered() {
        return $("#sideToolbarContainer:hover").length > 0;
    },

    /**
     * Hides the side toolbar panel with a slide out animation.
     */
    hide() {
        $("#sideToolbarContainer")
            .removeClass("slideInExt").addClass("slideOutExt");
    },

    /**
     * Shows the side toolbar panel with a slide in animation.
     */
    show() {
        if (!this.isVisible())
            $("#sideToolbarContainer")
                .removeClass("slideOutExt").addClass("slideInExt");
    },

    /**
     * Hides the inner container given by the selector.
     *
     * @param {Object} containerSelector the jquery selector for the
     * element to hide
     */
    hideInnerContainer(containerSelector) {
        containerSelector.removeClass("show").addClass("hide");

        this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
            containerSelector.attr('id'), false);
    },

    /**
     * Shows the inner container given by the selector.
     *
     * @param {Object} containerSelector the jquery selector for the
     * element to show
     */
    showInnerContainer(containerSelector) {

        // Before showing the container, make sure there is no other visible.
        // If we quickly show a container, while another one is animating
        // and animation never ends, so we do not really hide the first one and
        // we end up with to shown panels
        $("#sideToolbarContainer").children().each(function() {
            if ($(this).hasClass("show"))
                SideContainerToggler.hideInnerContainer($(this));
        });

        containerSelector.removeClass("hide").addClass("show");

        this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
            containerSelector.attr('id'), true);
    },

    /**
     * TO FIX: do we need to resize the chat?
     */
    resize () {
        //let [width, height] = UIUtil.getSidePanelSize();
        //Chat.resizeChat(width, height);
    }
};

export default SideContainerToggler;
@@ -429,16 +429,272 @@
 itter;%0A%0A
+        // We may not have a side toolbar container, for example, in%0A        // filmstrip-only mode.%0A        const sideToolbarContainer%0A            = document.getElementById(%22sideToolbarContainer%22);%0A%0A        if (!sideToolbarContainer)%0A            return;%0A%0A
         
@@ -729,17 +729,16 @@
 nimation
- 
 end even
@@ -759,16 +759,19 @@
 ake care
+ of
 %0A       
@@ -773,19 +773,16 @@
       //
- of
  hiding 
@@ -869,33 +869,8 @@
     
-document.getElementById(%22
 side
@@ -885,31 +885,16 @@
 ontainer
-%22)%0A            
 .addEven
@@ -903,16 +903,29 @@
 istener(
+%0A            
 %22animati
@@ -931,16 +931,28 @@
 ionend%22,
+%0A           
  functio
@@ -976,16 +976,17 @@
       if
+ 
 (e.anima
@@ -1259,16 +1259,28 @@
       %7D,
+%0A           
  false);
@@ -4452,8 +4452,9 @@
 Toggler;
+%0A

Check if the component exists on init