'use strict';

/* eslint-disable no-const-assign, no-unused-vars */
let ACLUISetup = window.ACLUISetup || {};

ACLUISetup = {
  aclPanel() {
    const $overlay = $('<div/>', { class: 'acl-panel-overlay' });
    const $panel = $('.acl-panel');
    const $panelTrigger = $('[data-toggle="acl-panel"]');
    const $panelClose = $panel.find('.panel__close');
    const $panelParent = $panel.parent();
    const $doc = $(document);
    const hasOverlay = $panel.data('has-overlay');
    const clickableOverlay = $panel.data('clickable-overlay');

    const closePanel = () => {
      $panel.removeClass('is-open');
      $doc.off('keyup', handleEsc); // eslint-disable-line no-use-before-define
      $overlay.remove();
    };

    const handleEsc = e => {
      if (e.keyCode === 27) {
        closePanel();
      }
    };

    // trigger panel
    $panelTrigger.on('click', () => {
      $panel.addClass('is-open');

      // Add event listener for closing panel with `esc`
      $doc.on('keyup', handleEsc);

      if (hasOverlay) {
        $panel.after($overlay);
      }
    });

    // close panel
    $panelClose.on('click', closePanel);
    if (clickableOverlay) {
      $panelParent.on('click', '.acl-panel-overlay', closePanel);
    }
  }
};