import { Component, AfterViewInit } from "@angular/core";
import { Subject, ReplaySubject } from "rxjs";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetOutput,
  WidgetInput,
} from "../../widget.metadata";
import { WidgetConfig, getOrDefault } from "../../widget.configuration";
import { CellWidget } from "../../../components/list-cell";
import { IgxGridCell } from "@infragistics/igniteui-angular";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { takeUntil } from "rxjs/operators";
import { deepCopy } from "../../../components/util/util.service";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../../components/local-storage/local-storage-constants";

export interface ToggleButtonConfiguration {
  /** Sets mandatory field if it is not found then the button is disabled */
  disableCondition?: string;
  /** Specifies if the button is used within a list cell @default(true) */
  listCellMode?: boolean;
  /** Specifies if we should stop the event propagation when button is clicked @default(false)*/
  stopPropagation?: boolean;
  /** Specifies the alignment*/
  alignment?: string;
  /** Sets local storage entry name */
  localStorageEntry?: string;
  /** Sets tooltip for toggle button */
  togglerTooltip?: string;
  /** Sets label for toggle button */
  togglerLabel?: string;
  /** Specifies toggle button class*/
  toggleClass?: string;
}

@WidgetComponent("nm-toggle-button-cell")
@Component({
  selector: "nm-toggle-button-cell",
  templateUrl: "./toggle-button-widget.component.html",
  styleUrls: ["./toggle-button-widget.component.scss"],
})
export class ToggleButtonWidgetComponent implements CellWidget, AfterViewInit {
  private unsubscribe = NgUnsubscribe.create();

  public row: any;
  public value: any;
  public cellComponent: IgxGridCell;

  public disableCondition: string;
  public listCellMode: boolean;
  public togglerLabel: string;
  public togglerTooltip: string;
  public alignment: string;
  public hide: boolean = false;
  private stopPropagation: boolean;
  public toggleClass: string;

  private toggleButtonEntry: LocalStorageEntry;

  /**
   * Sets the label for the toggle button
   */
  @WidgetInput()
  public togglerLabelChannel = new Subject<string>();

  /**
   * Sets the tooltip for the toggle button
   */
  @WidgetInput()
  public togglerTooltipChannel = new Subject<string>();

  /**
   * Hide the button
   */
  @WidgetInput()
  public hideButton = new ReplaySubject<boolean>(1);

  /**
   * Emits the state when the toggle changes or emits the toggle event if the listCellMode is enabled
   */
  @WidgetOutput()
  public toggleChange = new ReplaySubject<any>(1);

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

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<ToggleButtonConfiguration>
  ) {
    this.disableCondition = this.configuration.configuration.disableCondition;
    this.listCellMode = getOrDefault(
      this.configuration.configuration.listCellMode,
      true
    );
    this.stopPropagation = getOrDefault(
      this.configuration.configuration.stopPropagation,
      false
    );

    this.alignment = getOrDefault(
      this.configuration.configuration.alignment,
      "right"
    );
    this.togglerTooltip = this.configuration.configuration.togglerTooltip;
    this.togglerLabel = this.configuration.configuration.togglerLabel;
    this.toggleClass = this.configuration.configuration.toggleClass;

    if (configuration.configuration.localStorageEntry) {
      this.toggleButtonEntry = this.localStorageService.getLocalStorageEntry(
        configuration.configuration.localStorageEntry,
        Scope.GLOBAL,
        DeletionMode.NEVER
      );
    }
  }

  constructor(protected localStorageService: LocalStorageService) {}

  ngAfterViewInit() {
    if (!this.listCellMode) {
      if (
        this.toggleButtonEntry &&
        this.toggleButtonEntry.exists() &&
        this.toggleButtonEntry.value != null
      ) {
        this.value = {
          state: this.toggleButtonEntry.value === "true",
        };
      } else {
        this.value = {
          state: false,
        };
      }

      this.toggleChange.next(this.value.state);

      this.togglerLabelChannel
        .pipe(takeUntil(this.unsubscribe))
        .subscribe((togglerLabel) => (this.togglerLabel = togglerLabel));

      this.togglerTooltipChannel
        .pipe(takeUntil(this.unsubscribe))
        .subscribe((togglerTooltip) => (this.togglerTooltip = togglerTooltip));

      this.hideButton
        .pipe(takeUntil(this.unsubscribe))
        .subscribe((hide) => (this.hide = hide));
    }
  }

  selectionChange(event) {
    if (this.toggleButtonEntry) {
      this.toggleButtonEntry.value = event.checked;
    }

    if (this.listCellMode) {
      //  this.cellComponent.update(event);
      this.toggleChange.next({
        event: event,
        row: deepCopy(this.row),
      });
    } else {
      this.toggleChange.next(event.checked);
    }
  }

  onClick(event) {
    if (this.stopPropagation) {
      event.stopPropagation();
    }
  }

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