import {
  ChangeDetectorRef,
  Component,
  ElementRef,
  OnDestroy,
  ViewChild,
} from "@angular/core";
import {
  Subject,
  BehaviorSubject,
  ReplaySubject,
  timer,
  Observable,
} from "rxjs";
import { getOrDefault, WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
  WidgetConfiguration,
} from "../../widget.metadata";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { ProgressbarService } from "../../../components/progressbar/progressbar.service";
import { map, startWith, takeUntil, tap } from "rxjs/operators";
import { BaseConfiguration } from "../../widgetframe/widgetframe.component";

export interface EventWidgetButtonConfiguration extends BaseConfiguration {
  /**
   * The css class of the button element.
   * @default("nm-footer-button")
   */
  buttonClass?: string;
  /**
   * The type of the button to be used.
   * Possible values are "mat-raised-button", "mat-stroked-button", ...etc. Check nm-button for more possible values.
   * @default("mat-button")
   */
  buttonType?: string;
  /**
   * The color to paint the button in.
   */
  buttonColor: string;
  /**
   * The placeholder to show on the button
   */
  placeholder: string;

  /**
   * An angular material icon name to get and display next to the button placeholder
   */
  icon?: string;

  /**
   * Label to show outside the button
   */
  label?: string;

  /**
   * Show/Hide button a custom icon on the button. @default(false)
   */
  customIcon?: boolean;

  /**
   * Unique HTML button id
   */
  "button-id": string;
}

/**
 * Used in iPIM Buy.
 * No Widgetframe.
 *
 * Button of type mat-raised-button
 */
@WidgetComponent("nm-event-widget-button")
@Component({
  selector: "nm-event-widget-button",
  templateUrl: "./eventwidgetbutton.component.html",
  styleUrls: ["./eventwidgetbutton.component.scss"],
})
export class EventWidgetButtonWidgetComponent implements OnDestroy {
  @ViewChild("actionButton", { read: ElementRef }) actionButton: ElementRef;

  /**
   * Triggers a click
   */
  @WidgetInput()
  public triggerButtonClick: Subject<any> = new Subject<any>();

  /**
   * Enable or Disable the button
   */
  @WidgetInput("isDisabled")
  public isDisabled: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);

  /**
   * Hide or show the button
   */
  @WidgetInput("hideButton")
  private hideButton: Subject<boolean> = new Subject<boolean>();

  /**
   * Dynamic Placeholder
   */
  @WidgetInput()
  public dynamicPlaceholder: Subject<any> = new Subject<any>();

  /**
   * Set the icon, please check icon configuration for more details
   */
  @WidgetInput("iconInput")
  public iconInput: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  /**
   * Emits the click event
   */
  @WidgetOutput("fireEvent")
  private fireEvent: Subject<Event> = new Subject<Event>();

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

  private unsubscribe = NgUnsubscribe.create();
  public buttonClass: string;
  public buttonType: string;
  public buttonColor: string = "";
  public placeholder: string = "";
  public enableButtonHide: boolean = false;
  public id: string;
  public icon: string;
  public customIcon: boolean = false;
  public label: string;
  public disabled: boolean = false;

  constructor(
    private _progressbarService: ProgressbarService,
    private cdr: ChangeDetectorRef
  ) {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<EventWidgetButtonConfiguration>
  ) {
    this.buttonClass = getOrDefault(
      configuration.configuration.buttonClass,
      "nm-footer-button"
    );
    this.buttonType = getOrDefault(
      configuration.configuration.buttonType,
      "mat-button"
    );

    this.buttonColor = configuration.configuration.buttonColor;
    this.placeholder = configuration.configuration.placeholder;
    this.icon = configuration.configuration.icon;
    this.label = configuration.configuration.label;
    this.id = configuration.configuration["button-id"];

    if (configuration.configuration.customIcon) {
      this.customIcon = configuration.configuration.customIcon;
    }

    this.isDisabled.pipe(takeUntil(this.unsubscribe)).subscribe((disabled) => {
      this.disabled = disabled;
      this.cdr.detectChanges();
    });

    this.triggerButtonClick
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((triggerButtonClick) => {
        this.onClick(null);
      });

    this.hideButton
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((buttonHide) => {
        this.enableButtonHide = buttonHide;
      });

    this.dynamicPlaceholder
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((placeholder) => {
        this.placeholder = placeholder;
      });

    this.iconInput.pipe(takeUntil(this.unsubscribe)).subscribe((icon) => {
      if (icon) {
        this.icon = icon;
      }
    });
  }

  onClick(event) {
    this.fireEvent.next(event);
  }

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