import {
  Component,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
} from "@angular/core";
import { getOrDefault, WidgetConfig } from "../widget.configuration";
import { Subject, ReplaySubject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
  WidgetOutput,
} from "../widget.metadata";

import { NgUnsubscribe } from "../../ng-unsubscribe";
import * as moment_ from "moment";
import { BaseConfiguration } from "../widgetframe";
const moment = moment_;
export interface DateTimeRangePickerConfiguration extends BaseConfiguration {
  /**
   * Set focus on input. @default(false)
   */
  autofocus?: boolean;
}

@WidgetComponent("nm-date-time-range-picker")
@Component({
  selector: "nm-date-time-range-picker",
  templateUrl: "./date-time-range-picker.component.widget.html",
  styleUrls: ["./date-time-range-picker.component.widget.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DateTimeRangePickerWidgetComponent {
  private unsubscribe = NgUnsubscribe.create();

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

  @WidgetId()
  public _id;

  /**
   * Sets selected date range
   */
  @WidgetInput()
  public initialSelectedDateRange = new Subject<{
    startDate: moment_.Moment;
    endDate: moment_.Moment;
  }>();

  /**
   * Emits selected date range
   */
  @WidgetOutput()
  public selectedDateRange = new ReplaySubject<any>(1);

  public initialDateRange: {
    startDate: moment_.Moment;
    endDate: moment_.Moment;
  };

  public autofocus: boolean = false;

  constructor(protected cdr: ChangeDetectorRef) {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<DateTimeRangePickerConfiguration>
  ) {
    this.initialSelectedDateRange
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((initialSelectedDateRange) => {
        this.initialDateRange = initialSelectedDateRange;
        this.cdr.detectChanges();
      });

    this.autofocus = getOrDefault(
      this.configuration.configuration["autofocus"],
      false
    );
  }
  public chosenDateRange(value) {
    this.selectedDateRange.next(value);
  }
}