import {
  ChangeDetectorRef,
  Component,
  ElementRef,
  OnInit,
  Optional,
  Renderer2,
  EventEmitter
} from '@angular/core';
import {
  ContainerInteractionService,
  ControlComponent,
  WebComponentsService
} from '@mobilize/winforms-components';
import { WebMapService } from '@mobilize/angularclient';
import {
  BringTopService,
  dataTransfer,
  EventData,
  serverEvent
} from '@mobilize/base-components';

/**
 * ImageComponent
 *
 * @export
 * @class ImageComponent
 * @extends {ControlComponent}
 * @implements {OnInit}
 */
@Component({
  selector: 'wm-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.scss']
})
@dataTransfer(['img'])
export class ImageComponent extends ControlComponent implements OnInit {
  /**
   * Creates an instance of ImageComponent.
   * @param {WebMapService} serviceRef
   * @param {ChangeDetectorRef} changeDetectorRef
   * @param {Renderer2} render2
   * @param {ElementRef} elem
   * @param {WebComponentsService} webComponents
   * @param {BringTopService} bringTopServ1
   * @param {ContainerInteractionService} [containerInteraction]
   * @memberof ImageComponent
   */
  constructor(
    private serviceRef: WebMapService,
    private changeDetectorRef: ChangeDetectorRef,
    private render2: Renderer2,
    private elem: ElementRef,
    webComponents: WebComponentsService,
    @Optional() private bringTopServ1: BringTopService,
    @Optional() protected containerInteraction?: ContainerInteractionService
  ) {
    super(
      changeDetectorRef,
      render2,
      elem,
      webComponents,
      bringTopServ1,
      containerInteraction
    );
  }

  /**
   * Click emitter
   *
   * @type {EventEmitter<EventData>}
   * @memberof ImageComponent
   */
  Click: EventEmitter<EventData> = new EventEmitter<EventData>();

  /**
   * Get the image url from the model
   *
   * @readonly
   * @type {(string | null)}
   * @memberof ImageComponent
   */
  get imageUrl(): string | null {
    return this.model?.ImageUrl;
  }

  /**
   * Get the cssStyle from the model
   *
   * @readonly
   * @type {(string | null)}
   * @memberof ImageComponent
   */
  get cssStyle(): any | null {
    return this.model?.CssStyle;
  }

  /**
   * 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 wmcontrols directive
   *
   * @readonly
   * @type {number}
   * @memberof ImageComponent
   */
  protected calculateTabOrder(): number {
    return -1;
  }

  /**
   * Apply styles to component based on model CssStyle properties
   *
   * @param {*} element
   * @memberof ImageComponent
   */
  getCssStyle(element: any): void {
    const styles = this.cssStyle;
    /* c8 ignore else*/
    if (styles != null) {
      const properties = Object.keys(this.model.CssStyle);
      /* c8 ignore else*/
      if (properties.length > 0) {
        properties.forEach((key) => {
          const value = styles[key];
          this.render2.setStyle(element, key, value);
        });
      }
    }
  }

  /**
   * Click handler method
   *
   * @param {*} event
   * @memberof ImageComponent
   */
  @serverEvent('Click')
  clickHandler(event: any): void {
    const eventData = new EventData(event, this.id);
    this.Click.emit(eventData);
  }
}