import {
  Directive,
  ElementRef,
  EventEmitter,
  HostListener,
  Inject,
  Input,
  LOCALE_ID,
  Output,
  Renderer2
} from '@angular/core';
import {NgModel} from '@angular/forms';
import {VersionedSection} from '@nspop/gm-web-facade-api';
import {ObjectHelper} from './model-wrappers/objectHelper';
import {TooltipDirective} from './tooltip/tooltip.directive';
import {WindowService} from './services/window.service';
import {DocumentService} from './services/document.service';
import {formatDate} from '@angular/common';
import deepEqual from 'deep-equal';
import {RangeInputComponent} from './range-input/range-input.component';

@Directive({
  selector: '[ngModel][appVersionedSection], [appVersionedSection][min][max]',
  providers: [NgModel]
})
export class VersionedSectionDirective extends TooltipDirective {
  @Input() appVersionedSection?: VersionedSection;
  @Output() appVersionedSectionChange: EventEmitter<VersionedSection> = new EventEmitter<VersionedSection>();
  private previous = null;

  constructor(el: ElementRef,
              renderer: Renderer2,
              windowService: WindowService,
              documentService: DocumentService,
              @Inject(LOCALE_ID) private locale: string) {
    super(el, renderer, windowService, documentService);
    this.delay = 200;
    this.placement = 'cursor';
  }

  @HostListener('minChange', ['$event'])
  @HostListener('maxChange', ['$event'])
  @HostListener('ngModelChange', ['$event'])
  public onChange(newValue: any): void {
    if (!deepEqual(newValue, this.previous)) {
      this.appVersionedSectionChange.emit(ObjectHelper.setOnPath(this.appVersionedSection, 'dirty', true));
      this.previous = newValue;
    }
  }
  get tooltipTitle(): string {
    return 'Sidst ændret';
  }

  get tooltipText(): string {
    this.tooltipClasses = 'primary';
    if (this.appVersionedSection?.dirty) {
      return 'Versionsgruppen er ændret af dig og endnu ikke gemt';
    } else if (this.appVersionedSection?.author?.name || this.appVersionedSection?.modifiedTime) {
      let tooltip = this.appVersionedSection?.author?.name || '';
      if (this.appVersionedSection?.modifiedTime) {
        tooltip += '\n' + formatDate(this.appVersionedSection.modifiedTime, `dd.MM.yyyy '- kl.' HH.mm`, this.locale);
      }
      return tooltip;
    } else {
      this.tooltipClasses = 'hidden';
    }
    return '';
  }
}