import { map, filter } from "rxjs/operators";
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Subject, ReplaySubject } from "rxjs";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import {
  WidgetConfiguration,
  WidgetId,
  WidgetConfigure,
  WidgetComponent,
} from "../../widget.metadata";
import { WidgetConfig } from "../../widget.configuration";
import { ProgressbarService } from "../../../components/progressbar/progressbar.service";
import { CustomNotificationService } from "../../../components/notification/customnotification.service";
import { HalService } from "../../../components/hal/hal.service";
import { TranslateService } from "@ngx-translate/core";

declare var contextPath: string;

export interface GoogleTranslateConfiguration {
  /**
   * Sets the title shown in the Google Translate configuration header
   */
  title: string;

  /**
   * Sets CSS class name for the embedded header component
   */
  header: string;

  /**
   * Sets place holder text for Google Translate API key input field
   */
  keyKey: string;

  /**
   * Sets the url used for testing the validity of the provided Google Translate API key @default('')
   * (currently the component only checks if the url is not empty and uses a hard-coded value)
   */
  keyTestUrl?: string;

  /**
   * Sets the name for Google Translate API key
   */
  keyname: string;
}

/**
 * Used in App google-translate.
 * Surrounded by widgetframe
 * Provides form for google-translate configuration app
 */
@WidgetComponent("nm-google-translate")
@Component({
  selector: "nm-google-translate",
  templateUrl: "./google-translate.component.html",
  styleUrls: ["./google-translate.component.scss"],
})
export class GoogleTranslateComponent {
  public title: string;
  public header: string;
  public component: string;
  public keyTestUrl: string;

  public appSetup: any[];
  public appData: any;

  public action: any;

  @WidgetConfiguration()
  public configuration: WidgetConfig<GoogleTranslateConfiguration>;

  @WidgetId()
  public _id: string;

  public href: Subject<string> = new ReplaySubject<string>(1);

  constructor(
    private _progressbarService: ProgressbarService,
    private _widgetframeService: WidgetframeService,
    private _notificationService: CustomNotificationService,
    private _halService: HalService,
    private translateService: TranslateService,
    private http: HttpClient
  ) {
    this._progressbarService.requestFinished();
  }

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<GoogleTranslateConfiguration>
  ) {
    this.action = {};
    this.component = configuration.component;
    this.title = this.configuration.configuration.title;
    this.header = this.configuration.configuration.header;
    this.keyTestUrl = this.configuration.configuration.keyTestUrl
      ? this.configuration.configuration.keyTestUrl
      : "";
    let href = configuration._links["data"]["href"];
    this._progressbarService.addRequest();
    this._widgetframeService.getData(href).subscribe((data) => {
      this.appData = data;

      if (this.appData.enabled == "true") {
        console.log("if true", this.appData.enabled);
        this.appData.enabled = true;
      } else {
        this.appData.enabled = false;
      }
      this._progressbarService.requestFinished();
      console.log("this.appData.enabled", this.appData.enabled);
    });

    this.action.description = this.component;
    this.action.href = href;
    this.action.title = this.component;
    this.action.type = "request";

    this._halService
      .getActionEvents()
      .pipe(
        filter((event) => event.name === this.component),
        map((event) => (<any>event).response)
      )
      .subscribe((resp) => {
        this._notificationService.fromJson(resp);
      });
  }

  public testKey(key) {
    if (this.keyTestUrl.length > 0) {
      let url =
        "https://www.googleapis.com/language/translate/v2?key=" +
        key +
        "&source=en&target=de&q=Hello%20world";
      this._progressbarService.addRequest();
      this.http.get(url).subscribe(
        (response) => {
          this._notificationService.create(
            this.translateService.instant(
              "message.success.googleapitest.title"
            ),
            this.translateService.instant("message.success.googleapitest.body"),
            "success"
          );
          this._progressbarService.requestFinished();
        },
        (err) => {
          this._progressbarService.requestFinished();
          this._notificationService.create(
            this.translateService.instant("message.error.googleapitest.title"),
            this.translateService.instant("message.error.googleapitest.body"),
            "error"
          );
        }
      );
    } else {
      this._progressbarService.addRequest();

      window.setTimeout(() => {
        this._notificationService.create(
          this.translateService.instant("message.success.googleapitest.title"),
          this.translateService.instant("message.success.googleapitest.body"),
          "success"
        );

        this._progressbarService.requestFinished();
      }, 700);
    }
  }

  ngOnInit(): void {}

  ngOnDestroy(): void {}
}