import { Component, AfterViewInit, OnDestroy, ViewChild } from "@angular/core";
import { WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";
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";
import { takeUntil } from "rxjs/operators";
import { BaseConfiguration } from "../../widgetframe/widgetframe.component";
import { getOrDefault } from "../../../widgets";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { deepCopy } from "../../../components/util/util.service";

export interface DatePickerWidgetConfiguration extends BaseConfiguration {
  /**
   * Localized property key of label
   */
  label: string;
  /**
   * Local storage entry key for the date
   */
  localStorageDateEntry?: string;
  /**
   * Set picker type of date picker component e.g. 'calendar', 'both'
   */
  pickerType?: string;
  /**
   * Set first day of week shown in the date picker component
   */
  firstDayOfWeek?: number;
}

@WidgetComponent("nm-date-picker-widget")
@Component({
  selector: "nm-date-picker-widget",
  templateUrl: "./date-picker-widget.component.html",
  styleUrls: ["./date-picker-widget.component.scss"],
})
export class DatePickerWidgetComponent implements AfterViewInit, OnDestroy {
  /**
   * Clears date picker
   */
  @WidgetInput("reset")
  private resetChannel: Subject<any> = new Subject<any>();

  /**
   * Resets date picker to original date value entered at the beginning
   */
  @WidgetInput("resetToDefault")
  private resetToDefaultChannel: Subject<any> = new Subject<any>();

  /**
   * Set new value for the date picker
   */
  @WidgetInput("inputDate")
  private inputDate: Subject<any> = new Subject<any>();

  /**
   * Set maximum date allowed to be selected
   */
  @WidgetInput("maxDate")
  public maxDateInput: Subject<Date> = new Subject<Date>();

  /**
   * Output new date selected
   */
  @WidgetOutput("dateChange")
  public dateChange: ReplaySubject<any> = new ReplaySubject<any>(1);

  @ViewChild("datePicker", { static: false }) datePicker: any;

  public label: string;
  public pickerType: string;
  public inputDateValue: string;
  public firstDayOfWeek: number;
  private datePickerEntry: LocalStorageEntry;
  public maxDate: Date;
  private initialDefaultDate: string;

  public resetDate: Subject<any> = new Subject<any>();

  private unsubscribe = NgUnsubscribe.create();

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

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<DatePickerWidgetConfiguration>
  ) {
    this.label = configuration.configuration.label;
    this.pickerType = getOrDefault(
      configuration.configuration.pickerType,
      "calendar"
    );
    this.firstDayOfWeek = getOrDefault(
      this.configuration.configuration.firstDayOfWeek,
      1
    );

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

    this.resetChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((reset) => {
        this.resetPicker();
      });

    this.inputDate
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((date: Date) => {
        const formattedDate = date.toISOString();
        this.initialDefaultDate = formattedDate;
        if (
          !(
            this.datePickerEntry &&
            this.datePickerEntry.exists() &&
            this.datePickerEntry.value
          )
        ) {
          this.inputDateValue = this.initialDefaultDate;
          this.dateChange.next(this.inputDateValue);
        }
      });

    this.maxDateInput
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((date: Date) => {
        this.maxDate = date;
      });

    this.resetToDefaultChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((reset) => {
        if (this.initialDefaultDate) {
          this.datePicker.value = deepCopy(this.initialDefaultDate);
        } else {
          this.resetPicker();
        }
      });
  }

  constructor(protected localStorageService: LocalStorageService) {}

  ngAfterViewInit() {
    if (
      this.datePickerEntry &&
      this.datePickerEntry.exists() &&
      this.datePickerEntry.value
    ) {
      this.datePicker.value = this.datePickerEntry.value;
    }
  }

  valueChange(selectedDate) {
    if (selectedDate) {
      if (this.datePickerEntry) {
        this.datePickerEntry.value = new Date(selectedDate).toISOString();
      }
      this.dateChange.next(this.datePickerEntry.value);
    } else {
      if (this.datePickerEntry) {
        this.datePickerEntry.clear();
      }
      this.dateChange.next(null);
    }
  }

  resetPicker() {
    if (this.datePickerEntry) {
      this.datePickerEntry.clear();
    }
    this.resetDate.next();
  }

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