import {
  Component,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Renderer2,
  EventEmitter,
  ElementRef,
  Optional,
  Output,
  ViewChild,
  OnInit,
  AfterViewInit,
  Input,
  HostListener
} from '@angular/core';
import {
  ControlComponent,
  WebComponentsService,
  ContainerInteractionService,
  MarkForCheck,
  AjaxInteractionBaseService,
  DatesUtils
} from '@mobilize/winforms-components';
import {
  BringTopService,
  dataTransfer,
  EventData,
  serverEvent
} from '@mobilize/base-components';
import { ErrorCodes, ExceptionHandlerClass } from '@mobilize/webmap-core';
import { WebMapService, NotifyChange } from '@mobilize/angularclient';
import { DatePickerComponent } from '@progress/kendo-angular-dateinputs';

/**
 * Angular Component for AjaxCalendarComponent Control.
 *
 * @export
 * @class AjaxCalendarComponent
 * @extends {ControlComponent}
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'wm-ajax-calendar',
  templateUrl: './ajax-calendar.component.html',
  styleUrls: ['./ajax-calendar.component.scss'],
  inputs: ['model']
})
@dataTransfer(['ajxCal'])
@ExceptionHandlerClass(ErrorCodes.Winforms)
export class AjaxCalendarComponent
  extends ControlComponent
  implements OnInit, AfterViewInit
{
  /**
   *Reference to kendo datepicker component
   *
   * @type {DatePickerComponent}
   * @memberof AjaxCalendarComponent
   */
  @ViewChild('datepicker', { static: false })
  datePicker: DatePickerComponent | any;

  /**
   * Creates an instance of AjaxCalendarComponent.
   * @param {WebMapService} serviceRef
   * @param {ChangeDetectorRef} changeDetectorRef
   * @param {Renderer2} render2
   * @param {ElementRef} elem
   * @param {WebComponentsService} webComponents
   * @param {BringTopService} bringTopServ1
   * @param {ContainerInteractionService} [containerInteraction]
   * @memberof AjaxCalendarComponent
   */
  constructor(
    private serviceRef: WebMapService,
    private changeDetectorRef: ChangeDetectorRef,
    private render2: Renderer2,
    private elem: ElementRef,
    webComponents: WebComponentsService,
    @Optional() private bringTopServ1: BringTopService,
    @Optional() protected containerInteraction?: ContainerInteractionService,
    @Optional() private ajaxCalendarService?: AjaxInteractionBaseService
  ) {
    super(
      changeDetectorRef,
      render2,
      elem,
      webComponents,
      bringTopServ1,
      containerInteraction
    );
  }

  /**
   * Initialize component
   *
   * @memberof AjaxCalendarComponent
   */
  ngOnInit(): void {
    super.ngOnInit();
    /* c8 ignore start */
    this.ajaxCalendarService?.ClickEmittedNotification.subscribe(
      (evt: EventData) => {
        if (evt.Id === this.popupButtonID) {
          this.toggle(evt);
        }
      }
    ); /* c8 ignore stop */
  }

  /**
   * After Initialize view component
   *
   * @memberof AjaxCalendarComponent
   */
  ngAfterViewInit(): void {
    super.ngAfterViewInit();
    /* c8 ignore next 3 */
    if (this.datePicker != undefined) {
      this.datePicker.calendarType = this.calendarType;
    }
  }

  /**
   * ValueChanged event emitter.
   * @type {EventEmitter<EventData>}
   * @memberof DropdownListComponent
   */
  @Output()
  ValueChanged: EventEmitter<EventData> = new EventEmitter<EventData>();

  /**
   * default valiable to set calendarType property
   *
   * @type {string}
   * @memberof AjaxCalendarComponent
   */
  private calendarTypeInternal = 'classic';

  /**
   * variable to set default name of targetControlID property
   *
   * @type {string}
   * @memberof AjaxCalendarComponent
   */
  private targetControlIDInternal = '';

  /**
   * variable to set default name of popupButtonID property
   *
   * @type {string}
   * @memberof AjaxCalendarComponent
   */
  private popupButtonIDInternal = '';

  /**
   * default valiable to set selectedDate property
   *
   * @type {string}
   * @memberof AjaxCalendarComponent
   */
  private selectedDateInternal = '';

  /**
   * Get PopupButtonID Name of control  which will show calendar
   *
   * @readonly
   * @type {string}
   * @memberof AjaxCalendarComponent
   */
  get popupButtonID(): string {
    return this.model?.PopupButtonID ?? this.popupButtonIDInternal;
  }

  /**
   * Get TargetControl ID Name which calendar will assign selected value
   *
   * @readonly
   * @type {string}
   * @memberof AjaxCalendarComponent
   */
  get targetControlID(): string {
    return this.model?.TargetControlID ?? this.targetControlIDInternal;
  }

  /**
   * Optional input parameter to specify calendarType property setter and getter.
   *
   * @memberof AjaxCalendarComponent
   */
  @Input()
  set calendarType(calendarType: string) {
    this.calendarTypeInternal = calendarType;
  }
  get calendarType(): string {
    return this.calendarTypeInternal;
  }

  /**
   * store string selected date from calendar, property setter and getter.
   *
   * @memberof AjaxCalendarComponent
   */
  set selectedDate(selectedDate: string) {
    this.selectedDateInternal = selectedDate;
  }
  get selectedDate(): string {
    return this.selectedDateInternal;
  }

  /**
   * Notify value change on server side
   *
   * @memberof AjaxCalendarComponent
   */
  @MarkForCheck()
  @NotifyChange('Value')
  set value(value: Date) {
    const tempDate = DatesUtils.normalizeDateFromClient(value);
    this.model.Value = tempDate.toISOString();
  }

  /**
   * Return date for set in calendar
   *
   * @readonly
   * @type {Date}
   * @memberof AjaxCalendarComponent
   */
  get value(): Date | undefined {
    return this.model.Value
      ? DatesUtils.normalizeDateFromServer(new Date(this.model.Value))
      : undefined;
  }

  /**
   * Return format to show date in calendar
   *
   * @memberof AjaxCalendarComponent
   */
  get format(): string {
    return this.model?.Format ?? 'd';
  }

  /**
   *Get the tabOrder
   * This is to override and avoid to give focus to image component because is not focucable by tab
   * But its needed the wmcntrols directive
   * @readonly
   * @type {number}
   * @memberof AjaxCalendarComponent
   */
  protected calculateTabOrder(): number {
    return -1;
  }

  /**
   * Trigger the ValueChanged Event on server side
   *
   * @param {Date} selectedValue
   * @memberof AjaxCalendarComponent
   */
  @serverEvent('ValueChanged')
  onChange(event: any): void {
    this.selectedDate = event.toLocaleString();
    this.value = event;
    this.ValueChanged.emit(new EventData(event, this.id));
  }

  /**
   * Method allows to show or hide calendar in datepicker programmatically
   *
   * @memberof AjaxCalendarComponent
   */
  toggle(event: EventData) {
    event.event.stopPropagation();
    event.event.preventDefault();
    this.datePicker.toggle();
  }

  /**
   * Close the datepicker after the use click outside the popup
   * @param event
   */
  @HostListener('document:click', ['$event'])
  documentClick(event: any): void {
    if (!this.contains(event.target)) {
      this.datePicker.toggle(false);
    }
  }

  /**
   * Check if target element is inside the container of the popup
   * @param target
   * @returns
   */
  contains(target: any): boolean {
    return this.datePicker.popupRef?.popupElement.contains(target);
  }
}