import {BreakpointObserver} from '@angular/cdk/layout';
import {EventEmitter, Injectable, Signal, signal} from '@angular/core';
import {Observable, Subject} from 'rxjs';
import {map} from 'rxjs/operators';

import {ColorScheme, ColorSchemeService} from './color-scheme.service';

@Injectable({
  providedIn: 'root',
})
export class NshmpTemplateService {
  readonly desktopBreakpoint = '(max-width: 1040px)';
  readonly tabletBreakpoint = '(max-width: 640px)';
  readonly mobileBreakpoint = '(max-width: 480px)';

  startTutorialEvent = new Subject<void>();

  private showTutorial = signal(false);

  constructor(
    private breakpointObserver: BreakpointObserver,
    private schemeService: ColorSchemeService,
  ) {}

  set showTutorialInMenu(show: boolean) {
    this.showTutorial.set(show);
  }

  get showTutorialInMenu(): Signal<boolean> {
    return this.showTutorial;
  }

  /**
   * Returns true if application is set to dark color scheme.
   */
  get isDarkMode(): boolean {
    return (
      this.colorScheme === ColorScheme.DARK ||
      (this.colorScheme === ColorScheme.SYSTEM &&
        this.breakpointObserver.isMatched(this.schemeService.darkSchemeBreakpoint))
    );
  }

  /**
   * Returns true of max-width <= breakpoint else false.
   *
   * Default breakpoint: (max-width: 1040px)
   */
  get isSmallScreen(): boolean {
    return this.breakpointObserver.isMatched(this.desktopBreakpoint);
  }

  /**
   * Returns the screen change observable.
   * Returns true of max-width <= breakpoint else false.
   *
   * Default breakpoint: (max-width: 1040px)
   */
  get isSmallScreen$(): Observable<boolean> {
    return this.breakpointObserver$(this.desktopBreakpoint);
  }

  /**
   * Returns the application color scheme.
   *
   * Default is based off of the browser color scheme.
   */
  get colorScheme(): ColorScheme {
    return this.schemeService.colorScheme;
  }

  /**
   * Returns the event emitter for when the color scheme changes.
   */
  get colorSchemeChanged(): EventEmitter<ColorScheme> {
    return this.schemeService.colorSchemeChanged;
  }

  /**
   * Returns the screen change observable for a given breakpoint.
   *
   * @param breakpoint The breakpoint to observe
   */
  breakpointObserver$(breakpoint: string): Observable<boolean> {
    return this.breakpointObserver.observe(breakpoint).pipe(map(state => state.matches));
  }

  startTutorial(): Observable<void> {
    return this.startTutorialEvent.asObservable();
  }
}