import {
  Component,
  OnDestroy,
  OnInit,
  Input,
  Output,
  EventEmitter,
} from "@angular/core";
import { WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { MatRadioChange } from "@angular/material/radio";
import { takeUntil, flatMap } from "rxjs/operators";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { Subject, ReplaySubject } from "rxjs";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../../components/local-storage/local-storage-constants";

export interface RadiobuttonConfiguration {
  /**
   *  Available options to be displayed as radio buttons
   */
  options: any[];

  /**
   * A localized property key that used in fetching the suitable label text based on ui locale
   */
  label: string;

  /**
   * Show or hide the label of radio buttons. @default(true)
   */
  showLabel?: boolean;

  /**
   * Css class that should be applied for radio buttons
   */
  cssClass: string;

  /**
   *  A storage key to keep the selected option value
   */
  "local-storage-key": string;

  /**
   * A default selected value
   */
  defaultSelection: string;

  /**
   * This value is used to make radio button selection is mandatory or not. @default(false)
   */
  isMandatory: boolean;
}

@WidgetComponent("nm-radiobutton-widget")
@Component({
  selector: "nm-radiobutton-widget",
  templateUrl: "./radiobuttonwidget.component.html",
  styleUrls: ["./radiobuttonwidget.component.scss"],
})
export class RadiobuttonWidgetComponent implements OnInit, OnDestroy {
  /** Selected option*/
  @WidgetOutput("selectedValue")
  public selectedValue = new ReplaySubject<any>(1);

  /**
   * Set the input uri to fetch the radio buttons options from
   */
  @WidgetInput("uri") uri: ReplaySubject<any> = new ReplaySubject<any>(1);

  /**
   * Hide radio buttons from view
   */
  @WidgetInput("hideButtons")
  private hideButtons: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);

  /**
   * Clear radio buttons selection or reset to default if there is a default selection
   */
  @WidgetInput("reset")
  private resetButtons: ReplaySubject<any> = new ReplaySubject<any>(1);

  /**
   *  Change radio button label
   */
  @WidgetInput("radiobuttonLabel")
  private radiobuttonLabel: Subject<string> = new Subject<string>();

  @Input("radioOptions")
  public set radioOptions(configuration) {
    this.configureWidget(configuration);
  }

  @Output("selectedItem")
  public selectedItem = new EventEmitter<any>();

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

  @WidgetId()
  public _id;

  //Atlernative options from configuration
  public options: any;

  public label: string = "";
  public showLabel: boolean = true;
  public cssClass: string = "";
  public buttonValue = null;
  public hideGroup: boolean = false;
  public defaultSelection = null;
  private selectionEntry: LocalStorageEntry;
  public isMandatory: Boolean = false;

  private unsubscribe = NgUnsubscribe.create();

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<RadiobuttonConfiguration>
  ) {
    this.options = configuration.configuration["options"];
    this.label = configuration.configuration["label"];
    this.showLabel =
      configuration.configuration["showLabel"] !== undefined
        ? configuration.configuration["showLabel"]
        : this.showLabel;
    this.cssClass = configuration.configuration["cssClass"];
    if (configuration.configuration["local-storage-key"]) {
      this.selectionEntry = this.localStorageService.getLocalStorageEntry(
        configuration.configuration["local-storage-key"],
        Scope.GLOBAL,
        DeletionMode.NEVER
      );
    }
    this.defaultSelection = configuration.configuration["defaultSelection"];
    this.isMandatory = configuration.configuration["isMandatory"]
      ? configuration.configuration["isMandatory"]
      : false;
  }

  constructor(
    private _widgetFrameService: WidgetframeService,
    private localStorageService: LocalStorageService
  ) {}

  ngOnInit() {
    if (this.selectionEntry && this.selectionEntry.exists()) {
      this.buttonValue = this.selectionEntry.value;
    } else if (this.defaultSelection) {
      this.buttonValue = this.defaultSelection;
    } else if (this.isMandatory && this.options.length > 0) {
      this.buttonValue = this.options[0];
    }

    this.emitInitialValue();

    this.uri
      .asObservable()
      .pipe(
        takeUntil(this.unsubscribe),
        flatMap((href) => {
          if (href) {
            return this._widgetFrameService.getData(href);
          }
        })
      )
      .subscribe((data: any[]) => {
        if (data) {
          this.options = data;
          if (this.isMandatory && this.options.length > 0) {
            this.buttonValue = this.options[0];
          }
          this.emitInitialValue();
        }
      });

    this.hideButtons
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((hideButtons) => {
        this.hideGroup = hideButtons;
      });

    this.resetButtons
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(() => {
        if (this.defaultSelection) {
          this.buttonValue = this.defaultSelection;
          this.emitInitialValue();
        } else {
          this.buttonValue = null;
          if (this.selectionEntry) {
            this.selectionEntry.clear();
          }
          this.selectedValue.next(null);
          this.selectedItem.next(null);
        }
      });

    this.radiobuttonLabel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((label) => (this.label = label));
  }

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

  radioButtonChange(event: MatRadioChange) {
    if (this.selectionEntry) {
      this.selectionEntry.value = this.buttonValue;
    }
    this.selectedValue.next(event.value);
    this.selectedItem.next(event.value);
  }

  emitInitialValue() {
    if (this.options.length > 0 && this.buttonValue) {
      for (let selectedOption of this.options) {
        if (this.buttonValue === selectedOption.value) {
          this.selectionEntry.value = this.buttonValue;
          this.selectedValue.next(selectedOption.value);
          this.selectedItem.next(selectedOption.value);
        }
      }
    }
  }
}