import {
  NgClass,
  NgIf,
  NgStyle,
  NgTemplateOutlet,
} from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  contentChild,
  inject,
  Signal,
  viewChild,
} from '@angular/core';
import { MatIconButton } from '@angular/material/button';
import { MatDivider } from '@angular/material/divider';
import { MatIcon } from '@angular/material/icon';
import {
  MatDrawerMode,
  MatSidenav,
  MatSidenavContainer,
  MatSidenavContent,
} from '@angular/material/sidenav';
import { LayoutService } from '../layout.service';
import { NavigationComponent } from '../navigation/navigation.component';
import { SidenavFooterDirective } from './sidenav-footer.directive';
import { SidenavHeaderDirective } from './sidenav-header.directive';

@Component({
  selector: 'rxap-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    MatIcon,
    MatIconButton,
    MatSidenav,
    MatSidenavContainer,
    MatSidenavContent,
    NavigationComponent,
    NgIf,
    NgClass,
    NgStyle,
    MatDivider,
    NgTemplateOutlet,
  ],
})
export class SidenavComponent {

  protected readonly layoutService = inject(LayoutService);

  protected readonly sidenav = viewChild(MatSidenav);

  public readonly sidenavMode: Signal<MatDrawerMode> = computed(() => this.layoutService.mode());
  public readonly fixedBottomGap: Signal<number> = computed(() => this.layoutService.fixedBottomGap());
  public readonly fixedTopGap: Signal<number> = computed(() => this.layoutService.fixedTopGap());
  public readonly fixedInViewport: Signal<boolean> = computed(() => this.layoutService.fixedInViewport());
  public readonly pinned: Signal<boolean> = computed(() => this.layoutService.pinned());
  public readonly collapsed: Signal<boolean> = computed(() => this.layoutService.collapsed());
  public readonly collapsable: Signal<boolean> = computed(() => this.layoutService.collapsable());
  public readonly opened: Signal<boolean> = computed(() => this.layoutService.opened());
  public readonly sidenavFooterDirective = contentChild(SidenavFooterDirective);
  public readonly sidenavHeaderDirective = contentChild(SidenavHeaderDirective);

  togglePinned() {
    this.layoutService.togglePinned();
  }

  /**
   * To ensure the open state is in sync with the component. If the sidenav is closed, e.g. clicking outside the sidenav,
   * it is required to manually update the state in the LayoutService.
   * @param opened
   */
  onOpenedChanged(opened: boolean) {
    if (!opened) {
      this.layoutService.closeSidenav();
    }
  }

  async openSidenav() {
    await this.sidenav()?.open();
    this.layoutService.openSidenav();
  }

  async closeSidenav() {
    await this.sidenav()?.close();
    this.layoutService.closeSidenav();
  }

}