import {
  Directive,
  ElementRef,
  EventEmitter,
  HostListener,
  Input,
  OnInit,
  Output,
  Renderer2
} from '@angular/core';
import { EventData, serverEvent } from '@mobilize/base-components';
import { WebMapService } from '@mobilize/angularclient';

/**
 * Angular directive to set properties, styles and attributes to HTML Controls.
 *
 * @export
 * @class HtmlControlDirective
 * @implements {OnInit}
 */
@Directive({
  selector: '[wmHtmlControl]'
})
export class HtmlControlDirective implements OnInit {
  /**
   * Property used to save the model.
   *
   * @type {*}
   * @memberof HtmlControlDirective
   */
  @Input()
  model: any;

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

  /**
   * Url to upload the file.
   *
   * @memberof HtmlControlDirective
   */
  uploadFileUrl = 'api/inputfile/UploadFile';

  /**
   * Creates an instance of HtmlControlDirective.
   *
   * @param {ElementRef} element
   * @param {Renderer2} renderer
   * @param {WebMapService} wmService
   * @memberof HtmlControlDirective
   */
  constructor(
    private element: ElementRef,
    private renderer: Renderer2,
    private wmService: WebMapService
  ) {}

  /**
   * OnInit lifecycle hook.
   *
   * @memberof HtmlControlDirective
   */
  ngOnInit() {
    this.applyProperties();
    this.applyAtributes();
  }

  /**
   * Gets the Id property.
   *
   * @readonly
   * @type {string}
   * @memberof HtmlControlDirective
   */
  get id(): string {
    return this.model?.id ?? '';
  }

  /**
   * Gets the name property.
   *
   * @readonly
   * @type {string}
   * @memberof HtmlControlDirective
   */
  get name(): string {
    return this.model?.Name ?? '';
  }

  /**
   * Apply WebForms properties.
   *
   * @memberof HtmlControlDirective
   */
  applyProperties(): void {
    /* c8 ignore else*/
    if (this.model) {
      /* c8 ignore else*/
      if (this.model.InnerText) {
        this.renderer.setProperty(
          this.element.nativeElement,
          'innerText',
          this.model.InnerText
        );
      }
      if (this.model.Visible === false) {
        this.renderer.setStyle(this.element.nativeElement, 'display', 'none');
      } else {
        this.renderer.setStyle(this.element.nativeElement, 'display', '');
      }
    }
  }

  /**
   * Apply WebForms HTML attributes.
   *
   * @memberof HtmlControlDirective
   */
  applyAtributes(): void {
    /* c8 ignore else*/
    if (this.model?.Attributes) {
      for (const entry of Object.entries<string>(this.model.Attributes)) {
        const attribute: string = entry[0];
        const value: string = entry[1];
        this.renderer.setAttribute(
          this.element.nativeElement,
          attribute,
          value
        );
      }
    }
  }

  /**
   * Indicates if an event is binded in the server or not.
   * Added in the directive to validate and use the events mechanism.
   *
   * @param {string} event
   * @return {*}  {boolean}
   * @memberof HtmlControlDirective
   */
  isBindedEvent(event: string): boolean {
    return this.model?.events && this.model.events[event];
  }

  /**
   * Empty detectChanges method.
   * Added in the directive to use the events mechanism.
   *
   * @memberof HtmlControlDirective
   */
  detectChanges(): void {}

  /**
   * Listener for the click event.
   *
   * @param {*} event
   * @memberof HtmlControlDirective
   */
  @HostListener('click', ['$event'])
  clickListener(event: any): void {
    this.click(event);
  }

  /**
   * Triggers the OnClick emitter.
   *
   * @param {*} event
   * @memberof HtmlControlDirective
   */
  @serverEvent('Click')
  click(event: any): void {
    this.OnClick.emit(new EventData(event, this.id));
  }

  /**
   * Listener for the change event.
   *
   * @param {*} event
   * @memberof HtmlControlDirective
   */
  @HostListener('change', ['$event'])
  changeListener(event: any): void {
    /* c8 ignore else*/
    if (this.isInputFile(event)) {
      this.changeInputFileHandler(event);
    }
  }

  /**
   * Validates if the event is coming from an input file element.
   *
   * @param {*} event
   * @return {*}  {boolean}
   * @memberof HtmlControlDirective
   */
  isInputFile(event: any): boolean {
    return (
      event?.currentTarget?.localName === 'input' &&
      event.currentTarget.type === 'file'
    );
  }

  /**
   * Handles the change event for the input file.
   * Posts the selected file to the server.
   *
   * @param {*} event
   * @memberof HtmlControlDirective
   */
  changeInputFileHandler(event: any): void {
    const fileList = event.target.files;
    const formData: FormData = new FormData();
    const url = `${this.uploadFileUrl}?id=${this.id}`;
    /* c8 ignore else*/
    if (fileList?.length > 0) {
      formData.append('fileKey', fileList[0], fileList[0].name);
      this.wmService.post(url, formData).subscribe();
    }
  }
}