import {
  BackLinkAdapterService,
  BackLinkConfigElement,
  BackLinkUtilsService
} from '@allianz/taly-common/web-components';
import {
  CHANNEL,
  CHANNEL_TOKEN,
  PageDataForTemplate,
  PageTitleAsStageWithSubline,
  PageTitleAsStageWithTopline,
  Stage,
  TalyApiCommunicationService,
  TalyPageDataService
} from '@allianz/taly-core';
import { StageConfiguration } from '@allianz/taly-core/schemas';
import { Component, DestroyRef, inject, Inject, Input, Optional } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'frame-stage',
  template: `
    <frame-stage-view
      data-testid="stage-view"
      [isExpertAppearance]="isExpertChannel"
      [centered]="centered"
      [headline]="stageHeadline"
      [topline]="stageTopline"
      [subline]="stageSubline"
      [imageStart]="stageData?.startImage"
      [imageEnd]="stageData?.endImage"
      [imageNarrow]="stageData?.narrowImage"
      [backLinkData]="backLinkData"
      (backLinkClick)="runApiRequestIfNecessaryBeforeNavigating($event)"
    >
    </frame-stage-view>
  `,
  styleUrls: ['./stage.component.css'],
  standalone: false
})
export class StageComponent {
  @Input() stageConfig?: StageConfiguration;

  @Input() centered = false;

  backLinkData: BackLinkConfigElement | undefined;
  stageData: Stage | undefined;
  stageHeadline: string | undefined;
  stageTopline: string | undefined;
  stageSubline: string | undefined;

  isExpertChannel: boolean;

  private destroyRef = inject(DestroyRef);

  private getBackLinkData(): BackLinkConfigElement | undefined {
    let backLinkData: BackLinkConfigElement | undefined;
    let backLinkFeatureActiveForStage = false;

    if (this.backLinkAdapterService) {
      backLinkFeatureActiveForStage = this.backLinkUtilsService.isBackLinkFeatureActiveForStage(
        this.stageData?.hideBackLink
      );
      backLinkData = this.backLinkAdapterService.backLinkData;
    }

    return backLinkFeatureActiveForStage ? backLinkData : undefined;
  }

  private subscribeToPageDataChanges() {
    this.talyPageDataService.pageData$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((pageData: PageDataForTemplate | undefined) => {
        if (pageData?.stage) {
          this.stageData = pageData?.stage ?? undefined;
          this.stageHeadline = this.stageData?.headline;
          this.stageTopline = (this.stageData as PageTitleAsStageWithTopline)?.topline;
          this.stageSubline = (this.stageData as PageTitleAsStageWithSubline)?.subline;
        }
        this.backLinkData = this.getBackLinkData();
      });
  }

  constructor(
    private talyPageDataService: TalyPageDataService,
    private backLinkUtilsService: BackLinkUtilsService,
    @Inject(CHANNEL_TOKEN) channel: CHANNEL,
    @Optional() private backLinkAdapterService: BackLinkAdapterService,
    @Optional() private talyApiCommunicationService: TalyApiCommunicationService
  ) {
    this.isExpertChannel = channel === CHANNEL.EXPERT;
    this.subscribeToPageDataChanges();
  }

  runApiRequestIfNecessaryBeforeNavigating(event: Event) {
    if (!this.talyApiCommunicationService) return;

    const onClickServiceActivator = this.stageConfig?.backLink?.onClickServiceActivator;
    if (!onClickServiceActivator) return;

    event.preventDefault();

    this.talyApiCommunicationService
      .triggerApiRequest({
        name: onClickServiceActivator
      })
      .then(() => {
        window.location.href = (event.target as HTMLAnchorElement).href;
      })
      .catch(() => {
        // Swallow error, implementations of "talyApiCommunicationService" should cover the promise rejection case
        // Initially added to avoid "UnhandledPromiseRejection" error in node 16.x and newer, during unit tests run
      });
  }
}