import {
  ChangeDetectorRef,
  Component,
  ContentChild,
  DoCheck,
  ElementRef,
  EventEmitter,
  OnInit,
  Optional,
  Output,
  Renderer2,
  TemplateRef
} from '@angular/core';
import {
  ContainerInteractionService,
  ContainerTabOrderService,
  GridComponent,
  WebComponentsService
} from '@mobilize/winforms-components';
import { WebMapService } from '@mobilize/angularclient';
import { UntypedFormBuilder } from '@angular/forms';
import { ErrorCodes, ExceptionHandlerClass } from '@mobilize/webmap-core';
import {
  BringTopService,
  dataTransfer,
  serverEvent,
  EventData
} from '@mobilize/base-components';
import { InternalEventHandlerService } from '../../services';

@Component({
  selector: 'wm-data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.scss'],
  inputs: ['model'],
  providers: [
    InternalEventHandlerService,
    ContainerTabOrderService,
    ContainerInteractionService
  ]
})
@dataTransfer(['dtlst'])
@ExceptionHandlerClass(ErrorCodes.Winforms)
export class DataListComponent
  extends GridComponent
  implements OnInit, DoCheck
{
  /**
   * ItemCommand extractor.
   *
   * @static
   * @param {*} event
   * @param {DataListComponent} component
   * @return {*}  {*}
   * @memberof DataListComponent
   */
  static ItemCommandExtractor(event: any, component: DataListComponent): any {
    return [
      { Id: event.Id, MapperId: event.mapperId },
      {
        MapperId: DataListComponent.itemCommandMapperId,
        ControlSourceId: event.args.CommandSource?.id
      }
    ];
  }

  /**
   * MapperId value for ItemCommand event.
   *
   * @static
   * @memberof DataListComponent
   */
  static itemCommandMapperId = 'dlcmmnd';

  /**
   * Controls in the dataList
   *
   * @type {any[]}
   * @memberof DataListComponent
   */
  controls: any[] = [];

  /**
   * Base url value.
   *
   * @memberof DataListComponent
   */
  defaultDataUrl = 'api/dataList';

  /**
   * Url for the ids of the controls.
   *
   * @memberof DataListComponent
   */
  getControlIdsUrl = `${this.defaultDataUrl}/GetControlsId`;

  /**
   * Component item template reference.
   *
   * @type {*}
   * @memberof DataListComponent
   */
  @ContentChild('ItemTemplate')
  ItemTemplate!: TemplateRef<any>;

  /**
   * Emitter for the onItemCommand Event.
   *
   * @type {EventEmitter<{ source: any; e: any }>}
   * @memberof DataListComponent
   */
  @Output()
  OnItemCommand: EventEmitter<{ source: any; e: any }> = new EventEmitter();

  isContainer = true;

  /**
   * Creates an instance of DataListComponent.
   *
   * @param {WebMapService} wmService
   * @param {ChangeDetectorRef} refChange
   * @param {Renderer2} render2
   * @param {ElementRef} elem
   * @param {FormBuilder} formBuilderRef
   * @param {InternalEventHandlerService} internalEventHandler
   * @param {WebComponentsService} webComponents
   * @param {BringTopService} bringTopServ1
   * @memberof DataListComponent
   */
  constructor(
    private wmService: WebMapService,
    private refChange: ChangeDetectorRef,
    private render2: Renderer2,
    private elem: ElementRef,
    private formBuilderRef: UntypedFormBuilder,
    private internalEventHandler: InternalEventHandlerService,
    @Optional() private containerTabOService: ContainerTabOrderService,
    webComponents: WebComponentsService,
    @Optional() private bringTopServ1: BringTopService,
    @Optional() protected containerInteraction?: ContainerInteractionService
  ) {
    super(
      wmService,
      refChange,
      render2,
      elem,
      formBuilderRef,
      webComponents,
      bringTopServ1
    );
  }

  /**
   * OnInit lifecycle hook.
   *
   * @memberof DataListComponent
   */
  ngOnInit(): void {
    super.ngOnInit();
    this.refresh = this.refresh ? false : this.refresh;
    this.loadControlsById();
    this.setSelectableSettings();
    this.internalClickHandler();
  }

  /**
   * DoCheck lifecycle hook
   *
   * @memberof DataListComponent
   */
  ngDoCheck(): void {
    if (this.model && this.refresh) {
      this.loadControlsById();
      this.refresh = false;
    }
  }

  /**
   * Applies focus to first inner element by tab index
   */
  applyFocus(): void {
    this.containerTabOService.enterContainer(false, null, false);
  }

  /**
   * Loads the dataList components by its id.
   *
   * @memberof DataListComponent
   */
  loadControlsById(): void {
    this.wmService
      .fetch<any>(this.getControlIdsUrl, this.id)
      .subscribe((controlIds) => {
        // This to allow the server reassign of the dataSource controls collection
        this.controls = [];
        controlIds.forEach((templateIteration) => {
          const controlKeys = Object.keys(templateIteration);
          const iterationControls: any = {};
          controlKeys.forEach((controlKey) => {
            iterationControls[controlKey] = this.wmService.core.getModel(
              templateIteration[controlKey]
            );
          });
          this.controls.push(iterationControls);
        });
        this.refChange.detectChanges();
      });
  }

  /**
   * Gets the ItemStyle property.
   *
   * @readonly
   * @memberof DataListComponent
   */
  get itemStyle() {
    return this.model?.ItemStyle;
  }

  /**
   * gets the AlternatingItemStyle property.
   *
   * @readonly
   * @memberof DataListComponent
   */
  get alternatingItemStyle() {
    return this.model?.AlternatingItemStyle;
  }

  /**
   *Overrides visible property for setting up true if model doesn't have visible property exist model
   *
   * @readonly
   * @type {boolean}
   * @memberof DataListComponent
   */
  get visible(): boolean {
    return this.model?.Visible != null ? this.model.Visible : true;
  }

  /**
   * Returns the css class name to be used in the template iteration.
   *
   * @param {number} index
   * @return {*} {string}
   * @memberof DataListComponent
   */
  templateClass(index: number): string {
    return this.alternatingItemStyle !== undefined && index % 2 === 1
      ? this.alternatingItemStyle.CssClass
      : this.itemStyle?.CssClass;
  }

  /**
   * Handles the client click events raised by the dataList internal button controls.
   *
   * @memberof DataListComponent
   */
  internalClickHandler() {
    this.internalEventHandler.onButtonClick.subscribe((event) => {
      const eventData = new EventData(
        event,
        this.id,
        DataListComponent.itemCommandMapperId
      );
      eventData.args = event.clientClickArgs;
      this.onItemCommandEventHandler(eventData);
    });
  }

  /**
   * Triggers the onItemdCommand emitter.
   *
   * @param {*} event
   * @memberof DataListComponent
   */
  @serverEvent('ItemCommand', DataListComponent.ItemCommandExtractor)
  onItemCommandEventHandler(event: any): void {
    this.OnItemCommand.emit({ source: this.model, e: event?.args });
  }

  /**
   * Returns the controls for a specific item iteration.
   *
   * @param {string} itemId
   * @return {*}  {any[]}
   * @memberof DataListComponent
   */
  getItemControls(itemId: string): any[] {
    const itemControls: any[] = [];
    for (const controlItem of this.controls) {
      const keys = Object.keys(controlItem);
      for (const key of keys) {
        /* c8 ignore else*/
        if (controlItem[key].id === itemId) {
          return Object.keys(controlItem).map(
            (itemKey) => controlItem[itemKey]
          );
        }
      }
    }
    return itemControls;
  }
}