import {BreakpointObserver} from '@angular/cdk/layout';
import {EventEmitter, Injectable} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';

export enum ColorScheme {
  DARK = 'DARK',
  LIGHT = 'LIGHT',
  SYSTEM = 'SYSTEM',
}

@Injectable({
  providedIn: 'root',
})
export class ColorSchemeService {
  darkSchemeBreakpoint = '(prefers-color-scheme: dark)';

  private colorSchemeEmitter = new EventEmitter<ColorScheme>();
  private scheme = ColorScheme.LIGHT;
  private storageKey = 'nshmp-theme-preference';

  constructor(private breakpointObserver: BreakpointObserver) {
    const storageValue = localStorage.getItem(this.storageKey) as ColorScheme;

    this.breakpointObserver
      .observe(this.darkSchemeBreakpoint)
      .pipe(takeUntilDestroyed())
      .subscribe(() => {
        this.colorScheme = this.scheme;
      });

    if (storageValue !== null && Object.values<string>(ColorScheme).includes(storageValue)) {
      this.colorScheme = storageValue;
    } else {
      this.colorScheme = ColorScheme.SYSTEM;
    }
  }

  set colorScheme(scheme: ColorScheme) {
    this.scheme = scheme;
    let className = this.toClassName(scheme);

    if (scheme === ColorScheme.SYSTEM) {
      const preferDarkMode = this.breakpointObserver.isMatched(this.darkSchemeBreakpoint);
      className = preferDarkMode
        ? this.toClassName(ColorScheme.DARK)
        : this.toClassName(ColorScheme.LIGHT);
    }

    document.body.classList.remove(this.toClassName(ColorScheme.DARK));
    document.body.classList.remove(this.toClassName(ColorScheme.LIGHT));

    document.body.classList.add(className);
    localStorage.setItem(this.storageKey, scheme);
    this.colorSchemeEmitter.emit(scheme);
  }

  get colorScheme(): ColorScheme {
    return this.scheme;
  }

  get colorSchemeChanged(): EventEmitter<ColorScheme> {
    return this.colorSchemeEmitter;
  }

  private toClassName(scheme: ColorScheme): string {
    return `${scheme.toLowerCase()}-mode`;
  }
}