import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ConfigService } from '../../config/config.service';
import { AppLocalStorageService } from '../../ui-api/app-local-storage.service';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ThemingService {
  currentTheme: string;
  private appTopOffsetBS: BehaviorSubject<number> = new BehaviorSubject<number>(0);
  public readonly observableAppTopOffset: Observable<number> = this.appTopOffsetBS.asObservable();
  constructor(
    @Inject(DOCUMENT) private document: Document,
    private config: ConfigService,
    private appLocalStorageService: AppLocalStorageService
  ) {
    this.currentTheme = this.getActiveThemeName();
    this.config.authService.loggedInCompleted.subscribe(() => {
      this.activateTheme();
    });
  }

  public setAppTopOffset(offset: number) {
    this.appTopOffsetBS.next(offset);
  }

  public setNewActiveTheme(themeName: string) {
    this.appLocalStorageService.setActiveTheme(themeName);
    this.activateTheme();
  }

  public activateTheme() {
    const themeName = this.getActiveThemeName();
    const body = this.document.getElementsByTagName('body')[0];
    if (this.currentTheme) {
      if (body.classList.value.indexOf('app-theme') > -1) {
        body.classList.remove('app-theme-' + this.currentTheme);
      }
    }
    body.classList.add('app-theme-' + themeName);
    this.currentTheme = themeName;
  }

  public darkThemeApplied(): boolean {
    const body = this.document.getElementsByTagName('body')[0];
    return body.classList.value.indexOf('dark') > -1;
  }

  public getActiveThemeName() {
    const savedTheme = this.appLocalStorageService.getSavedTheme();
    if (savedTheme && this.config && this.config.current && this.config.current.settings) {
      // check if saved theme still exists in available themes
      for (const availableThemeName of this.config.current.settings.availableThemes) {
        if (availableThemeName === savedTheme) {
          return savedTheme;
        }
      }
      // return default theme as saved theme is not in the available themes list anymore
      return this.config.current.settings.defaultTheme;
    } else if (this.config && this.config.current && this.config.current.settings) {
      return this.config.current.settings.defaultTheme;
    }
  }

  public getTinyMceOptions(uploadHandler?: any) {
    const options = (this.config.current.settings.tinyMCEOptions as any);
    if (this.getActiveThemeName() === 'dark') {
      // @ts-ignore
      options.content_style = '' +
        'body {color: #fff !important;} ' +
        'code, pre[class*=language-] {color: #fff !important; background: #565c64; font-family; monospace;}' +
        '.mce-content-body [data-mce-selected=inline-boundary] {background-color: #565c64;}' +
        '.mce-content-body [contentEditable=false][data-mce-selected] {outline: 3px solid #1a1d21;}' +
        'code[class*=language-], pre[class*=language-] {font-family: monospace; text-shadow: none;}' +
        '.mce-content-body a {color: #FF6143}';
    } else {
      options.content_style = '' +
        'code, pre[class*=language-] {font-family; monospace;}' +
        '.mce-content-body [data-mce-selected=inline-boundary] {background-color: #e8e8e8;}' +
        '.mce-content-body [contentEditable=false][data-mce-selected] {outline: 3px solid #e5e5e5;}' +
        'code[class*=language-], pre[class*=language-] {font-family: monospace; text-shadow: none;}';
    }
    if (uploadHandler) {
      options.images_upload_handler = (blobInfo, success, failure, progress) => uploadHandler(blobInfo, success, failure, progress);
      options.automatic_uploads = false;
      options.images_reuse_filename = true;
      options.image_title = true;
    }
    return options;
  }

  public setOrphanCardMarginTop(innerHeight: number, heightOffset: number): string {
    let topMargin;
    if (innerHeight > 720) {
      topMargin = innerHeight / 2 - heightOffset;
    } else {
      topMargin = 10;
    }
    return `${topMargin}px`;
  }
}
