import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  Input,
  OnDestroy,
  OnInit,
  TemplateRef,
  ViewChild,
  ViewContainerRef,
} from "@angular/core";
import { AppContext } from "../../components/app-context/app.context";
import { Content } from "../../components/app-context/api";
import { NgUnsubscribe } from "../../ng-unsubscribe";
import {
  FlexibleConnectedPositionStrategy,
  Overlay,
  OverlayRef,
} from "@angular/cdk/overlay";
import { TemplatePortal } from "@angular/cdk/portal";
import { of } from "rxjs";
import {
  filter,
  flatMap,
  startWith,
  switchMap,
  takeUntil,
} from "rxjs/operators";
import { HttpClient } from "@angular/common/http";
import { interval } from "rxjs";
import { NavigationStart, Router, RouterEvent } from "@angular/router";

@Component({
  selector: "nm-toolbar-icon",
  template: `
    <button #button mat-icon-button (click)="onClick()">
      <mat-icon
        color="primary"
        matBadge="{{ count }}"
        matBadgeColor="accent"
        matBadgeSize="medium"
        [matBadgeHidden]="count === 0"
        >{{ configuration.icon }}</mat-icon
      >
    </button>

    <ng-template #overlayTemplate>
      <nm-interaction
        [configuration]="configuration"
        [param]="parameter"
      ></nm-interaction>
    </ng-template>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ToolbarIconComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild("button", { read: ElementRef })
  public button: ElementRef<any>;

  @ViewChild("overlayTemplate")
  public template: TemplateRef<any>;

  @Input() configuration: Content;

  private templatePortal: TemplatePortal<any>;

  private overlayRef: OverlayRef;
  public unsubscribe = NgUnsubscribe.create();
  private position: FlexibleConnectedPositionStrategy;
  public active: boolean = false;
  public count: number = 0;

  public parameter: any;

  constructor(
    private overlay: Overlay,
    private viewContainerRef: ViewContainerRef,
    private http: HttpClient,
    private appContext: AppContext,
    private cdr: ChangeDetectorRef,
    private router: Router
  ) {
    this.parameter = {
      close: () => this.detach(),
    };
  }

  ngOnInit(): void {
    if (this.configuration.links && this.configuration.links["counter"]) {
      let baseObservable;
      if (
        this.configuration.context &&
        this.configuration.context.refreshSelector
      ) {
        baseObservable = this.appContext.userContext.subscribe(
          this.configuration.context.refreshSelector
        );
      } else {
        baseObservable = of();
      }
      baseObservable
        .pipe(
          switchMap((data) => interval(10000).pipe(startWith(0))),
          flatMap((time) =>
            this.http.get(this.configuration.links["counter"], {
              params: { progress: "false" },
            })
          ),
          takeUntil(this.unsubscribe)
        )
        .subscribe((data) => {
          this.count = (<any>data).count;
          this.cdr.markForCheck();
        });
    }
  }

  ngAfterViewInit(): void {
    this.templatePortal = new TemplatePortal(
      this.template,
      this.viewContainerRef
    );
    this.position = this.overlay
      .position()
      .flexibleConnectedTo(this.button)
      .withPositions([
        {
          originX: "end",
          originY: "bottom",
          overlayX: "end",
          overlayY: "bottom",
          offsetY: 50,
        },
      ]);

    this.overlayRef = this.overlay.create({
      height: "520px",
      width: "400px",
      panelClass: "nm-toolbarOverlay",
      positionStrategy: this.position,
      disposeOnNavigation: true,
      hasBackdrop: true,
      backdropClass: "cdk-overlay-transparent-backdrop",
    });
  }

  onClick() {
    this.active = !this.active;

    if (this.active === true) {
      this.overlayRef.attach(this.templatePortal);

      this.overlayRef
        .backdropClick()
        .pipe(takeUntil(this.unsubscribe))
        .subscribe(() => this.detach());

      this.router.events
        .pipe(
          takeUntil(this.unsubscribe),
          filter((event: RouterEvent) => event instanceof NavigationStart)
        )
        .subscribe(() => this.detach());
    } else {
      this.overlayRef.detach();
    }

    this.cdr.markForCheck();
  }

  private detach() {
    if (this.overlayRef && this.overlayRef.hasAttached()) {
      this.overlayRef.detach();
    }

    this.active = false;
    this.cdr.markForCheck();
  }

  ngOnDestroy(): void {
    if (this.overlayRef) {
      this.overlayRef.dispose();
    }

    this.unsubscribe.destroy();
  }
}