export class Sidebar {
  element: HTMLElement | null;
  trigger: string;
  contentWrapper: HTMLElement| null;
  closeBtn: any;
  overlay: HTMLElement| null;
  isOpen: boolean;

  constructor(trigger: string) {
      this.trigger = trigger;
      this.element = document.getElementById(trigger);
      this.contentWrapper = document.querySelector('body');
      this.overlay = document.querySelector('.sidebar-overlay[data-trigger='+ this.trigger + ']');
      if(this.element) {
        this.closeBtn = this.element.querySelector('[data-trigger='+ this.trigger + ']');
      }
      this.isOpen = false;
  }

  toggle() {
      this.isOpen = !this.isOpen;
      if(this.trigger) {
        document.getElementById(this.trigger)?.classList.toggle('open');
      }
      if( this.contentWrapper) {
        this.contentWrapper.classList.toggle('overlay');
      }
      if(this.overlay) {
        this.overlay.classList.toggle('show');
      }
      if(this.element) {
        this.element.ariaModal = (this.element.ariaModal === 'true') ? 'false' : 'true';
        if(this.isOpen){
            const focusElement= this.element.querySelector('.focus-js') as HTMLElement | null;
            if(focusElement) {
                focusElement.focus();
            } else {
                this.closeBtn.focus();
            }
        }
      }
  }
}