import { BreakpointObserver } from '@angular/cdk/layout';
import { Component, ElementRef, HostBinding, Inject, Renderer2 } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { NavigationEnd, Router } from '@angular/router';
import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version';
import { I18NService } from './core/i18n/service';
import { BIXI_I18N_TOKEN } from './core/i18n/service.type';
import { MetaService } from './core/meta.service';
import { MobileService } from './core/mobile.service';

@Component({
  selector: 'app-root',
  template: ` <router-outlet></router-outlet> `
})
export class AppComponent {
  @HostBinding('class.mobile')
  isMobile = false;

  private query = 'only screen and (max-width: 767px)';
  private prevUrl = '';

  constructor(
    el: ElementRef,
    renderer: Renderer2,
    @Inject(BIXI_I18N_TOKEN) private i18n: I18NService,
    private meta: MetaService,
    private title: Title,
    private router: Router,
    private mobileSrv: MobileService,
    breakpointObserver: BreakpointObserver
  ) {
    renderer.setAttribute(el.nativeElement, 'ng-zorro-version', VERSION_ZORRO.full);

    breakpointObserver.observe(this.query).subscribe(res => {
      this.isMobile = res.matches;
      this.mobileSrv.next(this.isMobile);
    });

    this.router.events.subscribe(evt => {
      if (!(evt instanceof NavigationEnd)) return;
      // tslint:disable-next-line: no-any
      const gtag: any = (window as any).gtag;
      // tslint:disable-next-line: no-any
      const id: string = (window as any).BIXI_GA_ID;
      // tslint:disable-next-line: no-any
      if (gtag && id) {
        gtag('config', id,
          {
            'page_path': evt.urlAfterRedirects
          }
        );
      }

      const url = evt.url.split('#')[0].split('?')[0];
      if (url.includes('/dev') || url.includes('/404') || url.includes('/idea') || this.prevUrl === url) return;
      this.prevUrl = url;

      let urlLang = url.split('/').pop() || this.i18n.zone;
      if (urlLang && ['zh', 'en'].indexOf(urlLang) === -1) {
        urlLang = this.i18n.zone;
      }
      const redirectArr = evt.urlAfterRedirects.split('#')[0].split('?')[0].split('/');
      const redirectLang = redirectArr.pop();
      if (urlLang !== redirectLang) {
        let newUrl = '';
        if (~evt.urlAfterRedirects.indexOf('#')) {
          newUrl = evt.urlAfterRedirects.replace(`/${redirectLang}#`, `/${urlLang}#`);
        } else {
          newUrl = redirectArr.concat(urlLang).join('/');
        }
        this.router.navigateByUrl(newUrl, { replaceUrl: true });
        return;
      }

      if (urlLang) {
        const lang = this.i18n.getFullLang(urlLang);

        // update i18n
        if (this.i18n.lang !== lang) {
          // tslint:disable-next-line: no-any
          this.i18n.use(lang as any);
          this.meta.clearMenu();
        }
        this.meta.refMenu(url);
      }

      if (this.meta.set(url)) {
        this.router.navigateByUrl('/404');
        return;
      }
      const item = this.meta.getPathByUrl(url);
      this.title.setTitle(item ? (item.title || item.subtitle) + '-BIXI' : 'BIXI');
      // scroll to top
      document.body.scrollIntoView();
    });
  }
}