import { Component, ViewChild } from "@angular/core";
import { WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
} from "../../../widgets/widget.metadata";
import {
  LocalStorageEntry,
  LocalStorageEntryConfig,
  LocalStorageService,
} from "../../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../../components/local-storage/local-storage-constants";
import { OverlayContainer } from "@angular/cdk/overlay";
import { IgxButtonGroupComponent } from "@infragistics/igniteui-angular";
import { TranslateService } from "@ngx-translate/core";
import { ScrollService } from "../../../components/scroll/scroll.service";
import { zip } from "rxjs";
import { takeUntil, map } from "rxjs/operators";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { CurrentLocaleService } from "../../../components/i18n/currentLocale.service";

declare var contextPath: string;
declare var $;

export const densityStorageConfig: LocalStorageEntryConfig = {
  scope: Scope.UNSCOPED,
  key: "nm-toolbox-table-density",
  deletionMode: DeletionMode.NEVER,
};

export const fontSizeStorageConfig: LocalStorageEntryConfig = {
  scope: Scope.UNSCOPED,
  key: "nm-toolbox-table-fontsize",
  deletionMode: DeletionMode.NEVER,
};

@WidgetComponent("nm-table-config")
@Component({
  selector: "nm-table-config",
  templateUrl: "./table-config.component.html",
  styleUrls: ["./table-config.component.scss"],
})
export class TableConfigWidgetComponent {
  @WidgetConfiguration()
  public configuration: WidgetConfig;

  @WidgetId()
  public _id;

  @ViewChild(IgxButtonGroupComponent, { static: true })
  public densityGroup: IgxButtonGroupComponent;
  @ViewChild(IgxButtonGroupComponent, { static: true })
  public fontSizeGroup: IgxButtonGroupComponent;

  public density = "cosy";
  public fontSize = "medium";

  private densityStorage: LocalStorageEntry;
  private fontSizeStorage: LocalStorageEntry;

  public displayDensities;
  public fontSizes;
  private unsubscribe = NgUnsubscribe.create();

  constructor(
    private localStorageService: LocalStorageService,
    private overlayContainer: OverlayContainer,
    private translateService: TranslateService,
    private scrollService: ScrollService,
    private staticLocaleService: CurrentLocaleService
  ) {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.densityStorage = this.localStorageService.getLocalStorageEntryByConfig(
      densityStorageConfig
    );
    if (this.densityStorage.exists()) {
      this.density = JSON.parse(this.densityStorage.value);
    }

    this.fontSizeStorage = this.localStorageService.getLocalStorageEntryByConfig(
      fontSizeStorageConfig
    );
    if (this.fontSizeStorage.exists()) {
      this.fontSize = JSON.parse(this.fontSizeStorage.value);
    }
  }

  public selectDensity(event) {
    this.density = this.displayDensities[event.index].value;
    this.densityStorage.value = JSON.stringify(this.density);

    window.setTimeout(() => {
      for (let displayDensity of this.displayDensities) {
        <any>$("body").removeClass(displayDensity.value);
      }
      <any>$("body").addClass(this.density);
    }, 1);
  }

  public selectFontSize(event) {
    this.fontSize = this.fontSizes[event.index].value;
    this.fontSizeStorage.value = JSON.stringify(this.fontSize);
    this.scrollService.setFontSize(this.fontSize);

    window.setTimeout(() => {
      for (let fontSize of this.fontSizes) {
        <any>$("body").removeClass(fontSize.value);
      }
      <any>$("body").addClass(this.fontSize);
    }, 1);
  }

  public ngOnInit() {
    this.staticLocaleService
      .getCurrentLocale()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((value) => {
        this.initValues();
      });
  }

  private initValues() {
    zip(
      this.getDisplayDensity("label.compact", "compact", true),
      this.getDisplayDensity("label.cosy", "cosy", true),
      this.getDisplayDensity("label.comfortable", "comfortable", true)
    ).subscribe((data) => (this.displayDensities = data));

    zip(
      this.getFontSize("label.small", "small", true),
      this.getFontSize("label.medium", "medium", true),
      this.getFontSize("label.large", "large", true)
    ).subscribe((data) => (this.fontSizes = data));
  }

  private getDisplayDensity(label: string, value: string, togglable: boolean) {
    return this.getEntry(label, value, this.density, togglable);
  }

  private getFontSize(label: string, value: string, togglable: boolean) {
    return this.getEntry(label, value, this.fontSize, togglable);
  }

  private getEntry(
    label: string,
    value: string,
    selected: string,
    togglable: boolean
  ) {
    return this.translateService.get(label).pipe(
      map((translation) => {
        return {
          label: translation,
          value: value,
          selected: selected === value,
          togglable: togglable,
        };
      })
    );
  }

  public ngOnDestroy() {
    this.unsubscribe.destroy();
  }
}