import {
  Component,
  OnInit,
  ChangeDetectorRef,
  Renderer2,
  ElementRef,
  Optional,
  Output,
  EventEmitter,
  Input,
  ChangeDetectionStrategy,
  DoCheck,
  ViewChild
} from '@angular/core';
import {
  ControlComponent,
  WebComponentsService,
  ContainerInteractionService,
  MarkForCheck,
  BaseValidatorService
} 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';

/**
 * Angular Component for the DropdownList Control.
 *
 * @export
 * @class DropdownListComponent
 * @extends {ControlComponent}
 */

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'wm-dropdown-list',
  templateUrl: './dropdown-list.component.html',
  styleUrls: ['./dropdown-list.component.scss'],
  inputs: ['model']
})
@dataTransfer(['ddwnlst'])
@ExceptionHandlerClass(ErrorCodes.Winforms)
export class DropdownListComponent
  extends ControlComponent
  implements OnInit, DoCheck
{
  /**
   * Creates an instance of DropdownListComponent.
   * @param {WebMapService} serviceRef
   * @param {ChangeDetectorRef} changeDetectorRef
   * @param {Renderer2} render2
   * @param {ElementRef} elem
   * @param {WebComponentsService} webComponents
   * @param {BringTopService} bringTopServ1
   * @param {ContainerInteractionService} [containerInteraction]
   * @memberof DropdownListComponent
   */
  constructor(
    private serviceRef: WebMapService,
    private changeDetectorRef: ChangeDetectorRef,
    private render2: Renderer2,
    private elem: ElementRef,
    webComponents: WebComponentsService,
    @Optional() private baseValidatorService: BaseValidatorService,
    @Optional() private bringTopServ1: BringTopService,
    @Optional() protected containerInteraction?: ContainerInteractionService
  ) {
    super(
      changeDetectorRef,
      render2,
      elem,
      webComponents,
      bringTopServ1,
      containerInteraction
    );
  }

  /**
   * Sets the displayElement
   *
   * @memberof DropdownListComponent
   */
  @ViewChild('displayElement', { static: false })
  set displayElementPanel(value: ElementRef | any) {
    this.displayElement = value != null ? value.wrapper?.nativeElement : null;
  }

  /**
   * array with Data Source for Dropdownlist
   *
   * @type {any}
   * @memberof DropdownListComponent
   */
  items: any;
  /**
   *default variable to set autoposback in false in case autoposback doesn't exists from model
   *
   * @type {boolean}
   * @memberof DropdownListComponent
   */
  autoPostBackInternal = false;

  /**
   * default API to get Dropdownlist data
   *
   * @memberof DropdownListComponent
   */
  defaultDataUrl = 'api/DropDownList/GetItems';

  /**
   * Returns the data source URL of this component.
   *
   * @readonly
   * @type {string}
   * @memberof DropdownListComponent
   */
  get url(): string {
    return this.defaultDataUrl;
  }

  /**
   * Optional input parameter to specify autopostback property setter and getter.
   *
   * @memberof DropdownListComponent
   */
  @Input()
  set autoPostBack(autoPostBack: boolean) {
    this.model.AutoPostBack = autoPostBack;
  }
  get autoPostBack() {
    return this.model.AutoPostBack ?? this.autoPostBackInternal;
  }

  /**
   * Refresh property flag to identify
   * when to reload data in a dropdownlist
   *
   * @memberof DropdownListComponent
   */
  set refresh(value: boolean) {
    this.model.Refresh = value;
  }
  get refresh(): boolean {
    return this.model.Refresh;
  }

  /**
   * Gets visible property
   *
   * For this control the default is true
   *
   * @readonly
   * @type {boolean}
   * @memberof DropdownListComponent
   */
  get visible(): boolean {
    return this.model.Visible ?? true;
  }

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

  /**
   * Trigger the selectedValueChanged Event on server side
   *
   * @param {*} event
   * @memberof DropdownListComponent
   */
  @serverEvent('SelectedIndexChanged')
  triggerIndexChange(event: any): void {
    this.SelectedIndexChanged.emit(new EventData(event, this.id));
  }

  /**
   *Handle trigger server even in only if autoposback is true
   *
   * @param {*} event
   * @memberof DropdownListComponent
   */
  valueChangeHandler(event: any): void {
    /* c8 ignore else */
    if (this.baseValidatorService != undefined) {
      this.baseValidatorService.validate(this.id, event.Value);
    }

    if (this.autoPostBack) {
      this.triggerIndexChange(event);
    } else {
      this.SelectedIndexChanged.emit(new EventData(event, this.id));
    }
  }

  /**
   * Fetchs items
   *
   * @property items
   */
  fetchItems(): void {
    this.serviceRef.fetch<any>(this.url, this.id).subscribe((data) => {
      this.items = data;
      this.detectChanges();
      this.validateFirsTimeValue();
    });
  }

  /**
   * Initialize component and load data to Dropdownlist
   *
   * @memberof DropdownListComponent
   */
  ngOnInit(): void {
    super.ngOnInit();
    /* c8 ignore else */
    if (this.model) {
      this.refresh = false;
      this.fetchItems();
    }
  }

  /**
   * Gets the enabled property.
   *
   * @readonly
   * @type {boolean}
   * @memberof DropdownListComponent
   */
  get enabled(): boolean {
    return this.model?.Enabled ?? true;
  }

  /**
   * Get Selected Item
   * @readonly
   * @type {*}
   * @memberof DropdownListComponent
   */
  get selectedItem(): any {
    /* c8 ignore else */
    if (this.model) {
      /* c8 ignore else */
      if (
        this.model.SelectedIndex > -1 &&
        this.items != null &&
        this.items.length > this.model.SelectedIndex
      ) {
        return this.items[this.model.SelectedIndex];
      }
    }
    return null;
  }

  /**
   * Notify selectedIndex change on server side
   *
   * @memberof DropdownListComponent
   */
  @MarkForCheck()
  @NotifyChange('SelectedIndex')
  set selectedItem(value: any) {
    const currentValue = value;
    this.model.SelectedIndex = this.items
      ? this.items.indexOf(currentValue)
      : -1;
  }

  /**
   *Docheck lifecycle hook
   *
   * @memberof DropdownListComponent
   */
  ngDoCheck(): void {
    super.ngDoCheck();
    if (this.model && this.refresh) {
      this.fetchItems();
      this.refresh = false;
    }
  }

  /**
   * Validates the first time
   *
   * @memberof DropdownListComponent
   */
  validateFirsTimeValue(): void {
    if (this.selectedItem != null && this.baseValidatorService) {
      this.baseValidatorService.validate(this.id, this.selectedItem.Value);
    }
  }
}