import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { inject, Injectable, OnDestroy } from '@angular/core';
import { BriPlatformService } from '@davita/bridge-library/platform';
import { BriPlatform, ScreenType } from '@davita/bridge-library/shared';
import { BehaviorSubject, distinctUntilChanged, map, Observable, Subscription } from 'rxjs';

/**
 * call startBreakpointService.startBreakpointSubscribe() from AppComponent,
 * and subscribe currentBreakpoint$ from where you want to get current breakpoint
 * Angular material breakpoints: https://material.angular.io/cdk/layout/overview#predefined-breakpoints
 */
@Injectable({
  providedIn: 'root',
})
export class BriBreakpointService implements OnDestroy {
  private breakpointObserver: BreakpointObserver = inject(BreakpointObserver);
  private platformService: BriPlatformService = inject(BriPlatformService);
  private breakpointChanges$ = this.breakpointObserver
    .observe([
      Breakpoints.WebLandscape,
      Breakpoints.WebPortrait,
      Breakpoints.TabletLandscape,
      Breakpoints.TabletPortrait,
      Breakpoints.HandsetLandscape,
      Breakpoints.HandsetPortrait,
    ])
    .pipe(distinctUntilChanged());
  private breakpointSubject = new BehaviorSubject<string | undefined>(undefined);
  private _currentBreakpoint$ = this.breakpointSubject.asObservable();
  private changeSubscribe: Subscription | undefined;
  private screenTypeSubject = new BehaviorSubject<ScreenType | undefined>(undefined);
  private _screenTypeSubject$ = this.screenTypeSubject.asObservable();

  constructor() {}

  ngOnDestroy(): void {}

  public startBreakpointSubscribe() {
    // this may calls from multiple places
    if (!this.changeSubscribe) {
      this.changeSubscribe = this.breakpointChanges$.subscribe(() => this.breakpointChanged());
    }
  }

  get currentBreakpoint$(): Observable<string | undefined> {
    return this._currentBreakpoint$;
  }

  get screenType$(): Observable<ScreenType | undefined> {
    return this._screenTypeSubject$;
  }

  private breakpointChanged(): void {
    if (this.breakpointObserver.isMatched(Breakpoints.WebLandscape)) {
      this.breakpointSubject.next(Breakpoints.WebLandscape);
    } else if (this.breakpointObserver.isMatched(Breakpoints.WebPortrait)) {
      this.breakpointSubject.next(Breakpoints.WebPortrait);
    } else if (this.breakpointObserver.isMatched(Breakpoints.TabletLandscape)) {
      this.breakpointSubject.next(Breakpoints.TabletLandscape);
    } else if (this.breakpointObserver.isMatched(Breakpoints.TabletPortrait)) {
      this.breakpointSubject.next(Breakpoints.TabletPortrait);
    } else if (this.breakpointObserver.isMatched(Breakpoints.HandsetLandscape)) {
      this.breakpointSubject.next(Breakpoints.HandsetLandscape);
    } else if (this.breakpointObserver.isMatched(Breakpoints.HandsetPortrait)) {
      this.breakpointSubject.next(Breakpoints.HandsetPortrait);
    }
    this.getScreenType(this.breakpointSubject.value);
  }

  private getScreenType(currentBreakpoint: string | undefined) {
    let currentScreenType: ScreenType;
    switch (currentBreakpoint) {
      // toolbar and tablet UI
      case Breakpoints.TabletPortrait:
        currentScreenType = ScreenType.tabletPortrait;
        break;
      //  toolbar and mobile UI
      case Breakpoints.HandsetLandscape:
      case Breakpoints.HandsetPortrait:
        currentScreenType = ScreenType.handheld;
        break;
      // sidenav and web/tablet landscape UI
      default:
        currentScreenType = ScreenType.web;
        break;
    }
    this.screenTypeSubject.next(currentScreenType);
  }

  /**
   * @deprecated Use platformDevice instead
   * Returns non detail platform information. iPad won't returns iOS, it will be MacIntl.
   * @returns 'ios handheld', 'android handheld', 'web', and etc
   */
  public getPlatformAndDevice(): Observable<string> {
    return this._screenTypeSubject$.pipe(
      map((screenType: ScreenType | undefined) => {
        let platformAndDevice = this.platformService.currentPlatform();
        if (screenType) {
          platformAndDevice += ' ' + screenType;
        }
        return platformAndDevice;
      })
    );
  }

  /**
   * Returns detail platform information
   * @returns a combination of BriPlatform ScreenType
   *
   * Platform:
   *
   * 'iphone-webview', 'iphone-safari', 'iphone-browser',
   *
   * 'ipad-webview', 'ipad-safari', 'ipad-browser',
   *
   * 'android-webview', 'android-browser',
   *
   * 'computer'
   *
   *
   * Screen Type:
   *
   * 'web',
   *
   * 'handheld',
   *
   * 'tablet-portrait'
   */
  get platformDevice$(): Observable<string> {
    return this._screenTypeSubject$.pipe(
      map((screenType: ScreenType | undefined) => {
        let platformAndDevice: BriPlatform = this.platformService.platform;
        if (screenType) {
          return platformAndDevice + ' ' + screenType;
        }
        return platformAndDevice;
      })
    );
  }
}