import {Directive, ElementRef, Renderer2} from '@angular/core';

@Directive({
  selector: '[appMenuSelection]'
})
export class MenuSelectionDirective {

  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) {
    this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
      const mediaQuery = window.matchMedia('(max-width: 768px)');
      if (mediaQuery.matches) {
        this.onMenuSelect();
      }
    });
  }

  onMenuSelect(): void {
    const sidebar: HTMLElement = document.getElementById('sidebar');
    if (!sidebar?.classList.contains('active')) {
      sidebar?.classList.add('active');
    }
    const content: HTMLElement = document.getElementById('content');
    if (!content?.classList.contains('active')) {
      content?.classList.add('active');
    }
    const sidebarCollapse: HTMLElement = document.getElementById('sidebarCollapse');
    if (sidebarCollapse?.classList.contains('active')) {
      sidebarCollapse?.classList.remove('active');
    }
  }
}