var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
import { getCurrentBreakpoint } from '../../../../../utils/breakpoints';
import { PageResizeObserverSlimmer } from '../../../../../helpers/slimmers/page-resize-observer-slimmer';
export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-left-nav-e2e-resize-with-desktop}
   */
  constructor() {
    /* eslint-disable jsdoc/require-jsdoc*/
    super({
      callback: /* istanbul ignore next */ () => {
        this.updateBackdropUI(this.openState);
      },
    });
    /* eslint-enable jsdoc/require-jsdoc*/
  }
  connectedCallback() {
    this.backdrop = this.createBackdrop();
  }
  disconnectedCallback() {
    this.backdrop && this.backdrop.remove();
  }
  watchOpenState(newState) {
    this.updateBackdropUI(newState);
  }
  watchShowAsOverlay() {
    this.updateBackdropUI(this.openState);
  }
  getBackdrop() {
    return this.backdrop;
  }
  shouldShowBackdrop() {
    return this.isLargeScreen() && !this.showAsOverlay ? false : true;
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-left-nav-e2e-vega-click-backdrop}
   */
  /* istanbul ignore next */
  createBackdrop() {
    // eslint-disable-next-line no-restricted-globals
    const backdrop = document.createElement('vega-backdrop');
    backdrop.visible = false;
    backdrop.duration = 150;
    backdrop.addEventListener('vegaClick', () => {
      this.openStateController.setOpenState('close');
    });
    // eslint-disable-next-line no-restricted-globals
    document.body.append(backdrop);
    return backdrop;
  }
  updateBackdropUI(state) {
    // eslint-disable-next-line no-restricted-globals
    const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
    if (state === 'open') {
      if (mainContent && !this.shouldShowBackdrop()) {
        this.backdrop.visible = false;
      }
      else {
        this.backdrop.visible = true;
      }
    }
    else {
      this.backdrop.visible = false;
    }
  }
  isLargeScreen() {
    const currentBreakpoint = getCurrentBreakpoint();
    return currentBreakpoint == 'L' || currentBreakpoint == 'XL';
  }
}
__decorate([
  MapToComponentField()
], VegaLeftNavBackdropController.prototype, "openState", void 0);
__decorate([
  MapToComponentField()
], VegaLeftNavBackdropController.prototype, "showAsOverlay", void 0);
__decorate([
  MapToComponentField()
], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
__decorate([
  MapToComponentMethod('connectedCallback')
], VegaLeftNavBackdropController.prototype, "connectedCallback", null);
__decorate([
  MapToComponentMethod('disconnectedCallback')
], VegaLeftNavBackdropController.prototype, "disconnectedCallback", null);
__decorate([
  MapToComponentMethod('watchOpenState')
], VegaLeftNavBackdropController.prototype, "watchOpenState", null);
__decorate([
  MapToComponentMethod('watchShowAsOverlay')
], VegaLeftNavBackdropController.prototype, "watchShowAsOverlay", null);
