import {
  CHANNEL,
  CHANNEL_TOKEN,
  TalyApiCommunicationService,
  PageDataForTemplate,
  PageTitleAsStageWithSubline,
  PageTitleAsStageWithTopline,
  Stage,
  TalyPageDataService
} from '@allianz/taly-core';
import { StageConfiguration } from '@allianz/taly-core/schemas';
import {
  BackLinkAdapterService,
  BackLinkConfigElement,
  BackLinkUtilsService
} from '@allianz/taly-core/web-components';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  DestroyRef,
  inject,
  Input
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as windowUtils from '../../utils/window-utils';

@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,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class StageComponent {
  private talyPageDataService = inject(TalyPageDataService);
  private backLinkUtilsService = inject(BackLinkUtilsService);
  private backLinkAdapterService = inject(BackLinkAdapterService, { optional: true });
  private talyApiCommunicationService = inject(TalyApiCommunicationService, { optional: true });

  @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 cdr = inject(ChangeDetectorRef);

  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();
        this.cdr.markForCheck();
      });
  }

  constructor() {
    const channel = inject<CHANNEL>(CHANNEL_TOKEN);

    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(() => {
        windowUtils.setHref((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
      });
  }
}