import { Component, OnDestroy, OnChanges, OnInit } from "@angular/core";
import { Subject } from "rxjs";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetOutput,
  WidgetInput,
} from "../../widget.metadata";
import { WidgetConfig } from "../../widget.configuration";
import { CellWidget } from "../../../components/list-cell";
import { takeUntil } from "rxjs/operators";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { TranslateService } from "@ngx-translate/core";
import { ConditionalLinkUtilService } from "./conditional-link-widget.component.service";
import { UtilService } from "../../../components/util/util.service";
import { IMarketResponseService } from "../../../components/imarket/services/iMarketresponse.service";

export interface LinkConfiguration {
  /*
   * Link value for each cell value
   */
  value: string;
  /*
   * Tooltip for each cell value
   */
  tooltip: string;
  /*
   * Override link click for each cell value
   */
  overrideClick: boolean;
  /*
   * Defines whether link is disabled or not
   */
  disabled: boolean;
}
export interface ConditionalLinkConfiguration {
  /**
   * Defines the Links provided for each cell value
   */
  links: LinkConfiguration[];
  /**
   * Defines base redirection for navigation
   */
  baseRedirectionPage: string;
  /**
   * Defines list of custom css classes
   */
  customCssClasses: string[];
}

@WidgetComponent("nm-conditional-link")
@Component({
  selector: "nm-conditional-link",
  templateUrl: "./conditional-link-widget.component.html",
  styleUrls: ["./conditional-link-widget.component.scss"],
})
export class ConditionalLinkWidgetComponent
  implements CellWidget, OnDestroy, OnInit, OnChanges {
  public row: any;
  public value: any;
  public links: any;

  public baseRedirectionPage: string;
  public customCssClasses: string[];

  private unsubscribe = NgUnsubscribe.create();

  /**
   * Sets the links values
   */
  @WidgetInput()
  public inputLink = new Subject<string>();

  /**
   * Sets the disabled property for each link value
   */
  @WidgetInput()
  public toggleLinkState = new Subject<any>();

  /**
   * Emits the selected link/row
   */
  @WidgetOutput()
  public click = new Subject<any>();

  /**
   * Emits the selected icon
   */
  @WidgetOutput() 
  public selectedIcon = new Subject<any>();

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

  constructor(
    public translateService: TranslateService,
    public linkService: ConditionalLinkUtilService,
    private _responseService: IMarketResponseService
  ) {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<ConditionalLinkConfiguration>
  ) {
    this.links = this.configuration.configuration.links;
    this.baseRedirectionPage = this.configuration.configuration.baseRedirectionPage;
    this.customCssClasses = configuration.configuration.customCssClasses;

    this.inputLink
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((inputLink) => {
        this.links = inputLink;
      });

    this.toggleLinkState
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((event) => {
        this.links.forEach((link) => {
          link.disabled = !link.disabled;
        });
      });
  }

  onClick(link, event) {
    const overrideClick = this.linkService.onLinkClick(
      link,
      this.baseRedirectionPage,
      event
    );

    if (overrideClick) {
      this.overrideLinkClick(link);
      return false;
    }

    return overrideClick;
  }

  public overrideLinkClick(link) {
    if (!this.row && !link.disabled) {
      this.click.next(link);
    } else if (!link.disabled) {
      this.click.next({
        identifier: link.value,
        row: this.row,
      });
    }
  }

  getCssClasses(link: any) {
    let cssClasses = link.disabled ? ["--disabled"] : [];

    if (this.customCssClasses) {
      cssClasses = cssClasses.concat(this.customCssClasses);
    }
    return cssClasses.toString().replace(/,/g, " ");
  }

  ngOnInit() {
    if (this.row) {
      this.links = this.value;
    }
  }

  ngOnChanges() {
    if (this.row) {
      this.links = this.value;
    }
  }

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