import { ExtendedDisplayMessage } from '@allianz/ngx-pfe';
import { TALY_APP_TITLE } from '@allianz/taly-core';
import { HttpErrorResponse } from '@angular/common/http';
import { inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
import { PageActionStatus } from '../frame-parts/actions/model';
import { SectionConfig, SectionWithState } from '../frame-parts/navigation/model';
import { StepState } from '../frame-parts/navigation/navigation-step-state';
import { getSectionsWithStates } from '../frame-parts/navigation/navigation-utils';

/**
 * Helper service to integrate our frame navigation sections with external systems like PFE.
 *
 * Best used with an actual implementation like the `PfeFrameNavigationService`.
 * Provide it in your app root module.
 *
 * {
 *   provide: TalyFrameNavigationService,
 *   useClass: PfeFrameNavigationService
 * }
 */
export abstract class TalyFrameNavigationService {
  protected _currentSectionStates$ = new BehaviorSubject<SectionWithState[]>([]);
  currentSectionStates$ = this._currentSectionStates$.asObservable();

  protected _history$ = new BehaviorSubject<string[]>([]);
  history$ = this._history$.asObservable();

  private visibleSectionsSubscription?: Subscription;
  protected _visibleSections$ = new BehaviorSubject<SectionConfig>(new Map());
  visibleSections$ = this._visibleSections$.asObservable();

  abstract pageActionStatus$: Observable<PageActionStatus>;
  abstract applicationBusy$: Observable<boolean>;
  abstract applicationBusyMessage$: Observable<ExtendedDisplayMessage | undefined>;

  abstract gotoSection(sectionId: string): void;

  abstract gotoPage(pageId: string): void;

  abstract gotoErrorPage(errorResponse?: HttpErrorResponse): void;

  abstract navigateBack(): void;

  abstract navigateNext(): void;

  abstract navigateHome(): void;

  abstract saveOffer(): void;

  abstract cancel(): void;

  abstract getOfferCode$(stateKey: string): Observable<string | undefined>;

  private titleService: Title;
  private appTitle: string;
  private injectedAppTitle = inject(TALY_APP_TITLE, { optional: true });
  private isTitleUpdatesDisabled = false;

  constructor() {
    this.titleService = inject(Title);
    this.appTitle = this.titleService.getTitle();
  }

  public setSections(sections: SectionConfig = new Map()) {
    this.visibleSectionsSubscription?.unsubscribe();
    this.visibleSectionsSubscription = this.getVisibleSections$(sections)
      .pipe(
        tap((visibleSections) => this._visibleSections$.next(visibleSections)),
        tap(() => this.updateSectionStates()),
        tap(() => this.updatePageTitle())
      )
      .subscribe();
  }

  public disableTitleUpdates() {
    this.isTitleUpdatesDisabled = true;
  }

  public setTranslatedTitle(translatedTitle: string) {
    this.appTitle = translatedTitle;
    this.updatePageTitle();
  }

  protected abstract getVisibleSections$(sections: SectionConfig): Observable<SectionConfig>;

  protected updatePageTitle() {
    if (this.isTitleUpdatesDisabled) {
      return;
    }

    let currentSectionLabel;

    const currentSectionId = this._currentSectionStates$.value.find(
      (section) => section.state === StepState.CURRENT
    )?.sectionId;
    if (currentSectionId) {
      currentSectionLabel = this._visibleSections$.value.get(currentSectionId)?.label;
    }

    let appTitle = this.injectedAppTitle || this.appTitle;
    if (currentSectionLabel?.trim()) {
      appTitle = `${currentSectionLabel} - ${appTitle}`;
    }

    this.titleService.setTitle(appTitle);
  }

  protected updateSectionStates() {
    if (this._visibleSections$.value) {
      const sectionStates = getSectionsWithStates(
        this._history$.value,
        this._visibleSections$.value
      );
      this._currentSectionStates$.next(sectionStates);
    }
  }

  protected updateHistory(history: string[]) {
    this._history$.next(history);
    this.updateSectionStates();
    this.updatePageTitle();
  }
}