import {
  Component,
  OnInit,
  OnDestroy,
  AfterViewInit,
  ChangeDetectorRef,
  ChangeDetectionStrategy,
} from "@angular/core";
import { WidgetConfig, getOrDefault } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";
import { BaseConfiguration } from "../../widgetframe/widgetframe.component";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { IMarketResponseService } from "../../../components/imarket/services/iMarketresponse.service";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { Subject, EMPTY, of as observableOf } from "rxjs";
import {
  takeUntil,
  mergeMap,
  catchError,
  switchMap,
  distinctUntilChanged,
} from "rxjs/operators";
import { CurrentLocaleService } from "../../../components/i18n/currentLocale.service";
import { CellWidget } from "../../../components/list-cell";

export interface SimpleListConfiguration extends BaseConfiguration {
  /**
   * Data type of expected data
   */
  dataType: string;
  /**
   * Width of list
   */
  width: string;
  /**
   * Min-Width of list
   */
  minWidth: string;
  /**
   * Base path used to split currrent url  to get correct context path for redirection @default(null)
   */
  baseRedirectionPage: string;
  /**
   * Format used to show numbers within "NUMBER" switchcase in list @default(1.2-2)
   */
  numberFormat: string;
  /**
   * Classes to be added to whole list
   */
  listItemClasses?: string;

  [key: string]: any;
}
@WidgetComponent("nm-simple-item-list")
@Component({
  selector: "nm-simple-item-list",
  templateUrl: "./simple-item-list.component.widget.html",
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SimpleItemListWidgetComponent
  implements OnInit, OnDestroy, CellWidget, AfterViewInit {
  /**
   * Uri used to fetch data
   */
  @WidgetInput("uri")
  public uri: Subject<string> = new Subject<string>();

  /**
   * Data sent drectly from controller
   */
  @WidgetInput("data")
  public data: Subject<any> = new Subject<any>();

  /**
   * Data sent drectly from controller
   */
  @WidgetOutput("buttonClicked")
  public buttonClicked: Subject<string> = new Subject<string>();

  /**
   * Data sent drectly from controller
  */
  @WidgetOutput("togglerClicked")
  public togglerClicked: Subject<string> = new Subject<string>();
  
  @WidgetConfiguration()
  public configuration: WidgetConfig<SimpleListConfiguration>;

  @WidgetId()
  public widgetId: string;

  private unsubscribe = NgUnsubscribe.create();

  public row: any;
  public value: any;

  public header: string;
  public infoTitle: string;
  public infoText: string;
  public wikiLink: string;
  public withBorder: boolean = true;
  public withHeader: string;
  public title: string;
  private dataType: string;
  private notificationKey: string;
  public dataRecieved: Subject<any> = new Subject<any>();
  public listItemClasses: string;

  constructor(
    private _widgetframeService: WidgetframeService,
    private _responseService: IMarketResponseService,
    private currentLocaleService: CurrentLocaleService,
    private cd: ChangeDetectorRef
  ) {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.dataType = configuration.configuration.dataType;
    this.notificationKey = getOrDefault(
      configuration.configuration.notificationKey,
      "imarket.api-call"
    );
    this.header = getOrDefault(
      this.configuration.configuration.header,
      "primary"
    );
    this.withHeader = getOrDefault(
      this.configuration.configuration.withHeader,
      false
    );
    this.title = this.configuration.configuration.title;
    this.infoTitle = configuration.configuration.infoTitle;
    this.infoText = configuration.configuration.infoText;
    this.wikiLink = this.configuration.configuration.wikiLink;
    this.withBorder = getOrDefault(
      this.configuration.configuration.withBorder,
      true
    );
    this.listItemClasses = this.configuration.configuration.listItemClasses;

    if (this.configuration.id) {
      this.widgetId = this.configuration.id;
    }
  }

  ngOnInit() {
    this.uri
      .asObservable()
      .pipe(
        switchMap((uri) => {
          return observableOf(uri).pipe(
            mergeMap((href) => this._widgetframeService.getData(href)),
            catchError((error) => {
              this._responseService.showNotification(
                this.notificationKey,
                "error"
              );
              return EMPTY;
            })
          );
        }),
        takeUntil(this.unsubscribe)
      )
      .subscribe((data) => {
        if (
          this._responseService.handleResponse(data, this.notificationKey, {
            notify: false,
          })
        ) {
          this.updateData(data);
        }
      });

    this.currentLocaleService
      .getCurrentLocale()
      .pipe(distinctUntilChanged())
      .subscribe((locale) => {
        const link = this.configuration.configuration.uri;
        if (link) {
          this._widgetframeService
            .getData(link)
            .pipe(takeUntil(this.unsubscribe))
            .subscribe(
              (data) => {
                this.updateData(data);
              },
              (err) => {
                this._responseService.showNotification(
                  this.notificationKey,
                  "error"
                );
                return EMPTY;
              }
            );
        }
    });

    this.data
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((data) => this.updateData(data));
  }

  ngAfterViewInit() {
    if (this.row) {
      this.updateData(this.value);
    }
  }

  updateData(data) {
    if (!data) {
      this.dataRecieved.next(null);
    } else if (this.dataType && data[this.dataType]) {
      this.dataRecieved.next(data[this.dataType]);
    } else {
      this.dataRecieved.next(data);
    }
    this.cd.detectChanges();
  }

  onButtonClick(event) {
    this.buttonClicked.next(event);
  }

  onTogglerClick(event) {
    this.togglerClicked.next(event);
  }

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