import {
  Component,
  EventEmitter,
  Output,
  Input,
  OnInit,
  ChangeDetectorRef,
  Inject,
  OnDestroy,
} from '@angular/core';
import { MwCoreToolbarService } from './core-toolbar.service';
import { Router, NavigationEnd } from '@angular/router';
import { filter, takeUntil } from 'rxjs/operators';
import { MwCoreToolbarOptions } from './core-toolbar.options';
import { DOCUMENT } from '@angular/common';
import { fromEvent, Subject } from 'rxjs';
import { Config, MwAppConfigService } from 'projects/core/src//config';

export const DEFAULT_CORE_TOOLBAR_OPTIONS: MwCoreToolbarOptions = {
  allowBack: false,
  showLogo: true,
  showActions: true,
};

@Component({
  selector: 'mw-core-toolbar',
  templateUrl: './core-toolbar.component.html',
  styleUrls: ['./core-toolbar.component.scss'],
})
export class MwCoreToolbarComponent implements OnInit, OnDestroy {
  showSearch = false;
  options = DEFAULT_CORE_TOOLBAR_OPTIONS;
  isFullScreen = false;

  @Input() set title(value: string) {
    this.options.title = value;
  }
  @Input() set showLogo(value: boolean) {
    this.options.showLogo = value;
  }

  @Input() set logo(value: string | null) {
    this.localLogo = value ?? this.defaultLogo;
  }

  @Output() titleClick = new EventEmitter();
  @Output() toggle = new EventEmitter();

  get showActions(): boolean {
    return this.options.showActions === true;
  }

  get showToggler(): boolean {
    const showToggler = this.config?.layout?.toolbar?.showToggler === true;
    return showToggler && this.allowBack === false;
  }

  get showCompactLogo(): boolean {
    let showCompactLogo = this.config?.layout?.toolbar?.showCompactLogo;

    showCompactLogo = showCompactLogo === undefined ? false : showCompactLogo;
    return showCompactLogo;
  }

  get showFullscreenButton(): boolean {
    let showFullscreenButton =
      this.config?.layout?.toolbar?.showFullscreenButton;

    showFullscreenButton =
      showFullscreenButton === undefined ? true : showFullscreenButton;
    return showFullscreenButton;
  }

  get allowBack(): boolean {
    return this.options.allowBack === true;
  }

  // tslint:disable-next-line: adjacent-overload-signatures
  get logo(): string {
    return (
      (this.options.showLogo &&
        this.localLogo !== this.defaultLogo &&
        this.localLogo) ||
      this.defaultLogo
    );
  }

  get showLogoLoadingEffect(): boolean {
    return this.localLogo !== this.defaultLogo;
  }

  get title(): string {
    return this.options.title || '';
  }
  defaultLogo = 'assets/img/logo.svg';
  private config?: Config;
  private localLogo = 'assets/img/logo.svg';
  private elem?: any;
  private unsubscribeAll$ = new Subject<void>();

  constructor(
    private service: MwCoreToolbarService,
    private configService: MwAppConfigService,
    private router: Router,
    private changeDetectorRef: ChangeDetectorRef,
    @Inject(DOCUMENT) private document: any
  ) {
    this.configService.getConfig().subscribe((config) => {
      this.config = config;
      this.changeDetectorRef.markForCheck();
    });
  }

  ngOnInit(): void {
    this.subscribeToNavigationEnd();
    this.subscribeToOptionsChange();
    this.subscribeToWindowsResize();

    this.elem = document.documentElement;
  }

  ngOnDestroy(): void {
    this.unsubscribeAll$.next();
    this.unsubscribeAll$.complete();
  }

  onTitleClick(): void {
    this.titleClick.emit();
  }

  onBackClick(): void {
    this.service.emitBackClickEvent();
  }

  openFullScreen(): void {
    if (!this.elem) {
      throw new Error('elem is not defined');
    }

    const requestFullscreen =
      this.elem.requestFullscreen ||
      this.elem.mozRequestFullScreen ||
      this.elem.webkitRequestFullscreen ||
      this.elem.msRequestFullscreen;

    if (requestFullscreen) {
      requestFullscreen.call(this.elem);
    }
  }

  closeFullScreen(): void {
    const exitFullScreen =
      this.document.exitFullscreen ||
      this.document.mozCancelFullScreen ||
      this.document.webkitExitFullscreen ||
      this.document.msExitFullscreen;

    if (exitFullScreen) {
      exitFullScreen.call(this.document);
    }
  }

  onLogoError(event: Event): void {
    const imgElement = event.target as HTMLImageElement;
    imgElement.src = this.defaultLogo;
  }

  private subscribeToWindowsResize(): void {
    fromEvent(window, 'resize')
      .pipe(takeUntil(this.unsubscribeAll$))
      .subscribe(() => {
        const isFullScreenNow = 1 >= outerHeight - innerHeight;
        if (
          (isFullScreenNow && this.document.fullscreenElement) ||
          !isFullScreenNow
        ) {
          this.isFullScreen = isFullScreenNow;
        }

        this.changeDetectorRef.markForCheck();
      });
  }

  private subscribeToOptionsChange(): void {
    this.service.options$
      .pipe(takeUntil(this.unsubscribeAll$))
      .subscribe((options) => {
        this.options = {
          ...this.options,
          ...options,
        };
        this.changeDetectorRef.detectChanges();
      });
  }

  private subscribeToNavigationEnd(): void {
    this.router.events
      .pipe(
        takeUntil(this.unsubscribeAll$),
        filter((event) => event instanceof NavigationEnd)
      )
      .subscribe(() => {
        this.options = DEFAULT_CORE_TOOLBAR_OPTIONS;
        this.changeDetectorRef.markForCheck();
      });
  }
}