import {
  AfterViewChecked,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  OnDestroy,
  OnInit,
  Optional,
  Renderer2
} from '@angular/core';
import {
  BaseValidatorService,
  ContainerInteractionService,
  MarkForCheck,
  TextBoxComponent,
  WebComponentsService
} from '@mobilize/winforms-components';
import { BringTopService, dataTransfer } from '@mobilize/base-components';
import { NotifyChange, WebMapService } from '@mobilize/angularclient';

/**
 * Angular Component for the AspTextBox Control.
 *
 * @export
 * @class AspTextBoxComponentComponent
 * @extends {TextBoxComponent}
 * <example-url>https://webforms-livedemos.azurewebsites.net/assets/live-demos/asp-text-box/asp_text_box.html</example-url>
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'wm-asp-textbox',
  templateUrl: './asp-text-box-component.component.html',
  styleUrls: ['./asp-text-box-component.component.scss'],
  inputs: ['model']
})
@dataTransfer(['txtBx'])
export class AspTextBoxComponentComponent
  extends TextBoxComponent
  implements AfterViewChecked, OnInit, OnDestroy
{
  constructor(
    private wmService: WebMapService,
    private changeDetectorRef: ChangeDetectorRef,
    private render2: Renderer2,
    private elem: ElementRef,
    webComponentsServ: WebComponentsService,
    @Optional() private baseValidator: BaseValidatorService,
    @Optional() bringTop: BringTopService,
    @Optional() protected containerInteractionServ?: ContainerInteractionService
  ) {
    super(
      wmService,
      changeDetectorRef,
      render2,
      elem,
      webComponentsServ,
      baseValidator,
      bringTop,
      containerInteractionServ
    );
  }

  /**
   * This is to validate the validator service execute only once when the control loads the text property
   * from the model
   *
   * @memberof TextBoxComponent
   */
  textValidatedFirstTime = false;

  /**
   * Sync complete subscription of control component
   */
  syncComplete: string | undefined;

  /**
   * OnInit method of AspTextBoxComponent
   *
   * @memberof AspTextBoxComponentComponent
   */
  ngOnInit(): void {
    // This is for the cases when the change of the text is coming from the Backend, and then, we need
    // to check and execute the validate of the validation service
    /* c8 ignore start */
    this.syncComplete = this.wmService.core
      .getEvent()
      .subscribe('SyncCompleted', () => {
        if (
          this.baseValidator &&
          this.textValidatedFirstTime &&
          this.text.length > 0
        ) {
          this.baseValidator.validate(this.id, this.text);
        }
        // This should happen every time a change is coming from server
        // even is text is empty
        this.detectChanges();
      }); /* c8 ignore stop */
  }

  /**
   * After View Checked of AsPTextBoxComponent
   *
   * @memberof AspTextBoxComponentComponent
   */
  ngAfterViewChecked(): void {
    if (
      !this.textValidatedFirstTime &&
      this.text.length > 0 &&
      this.baseValidator
    ) {
      this.baseValidator.validate(this.id, this.text);
    }
    this.textValidatedFirstTime = true;
  }

  /**
   * OnDestroy of AspTextBoxComponent
   *
   * @memberof AspTextBoxComponentComponent
   */
  ngOnDestroy(): void {
    /* c8 ignore next 3 */
    if (this.syncComplete) {
      this.wmService.core.getEvent().unSubscribe(this.syncComplete);
    }
  }

  /**
   * Detect changes of the AspTextBox
   *
   * @memberof AspTextBoxComponentComponent
   */
  detectChanges(): void {
    super.detectChanges();
    this.changeDetectorRef.detectChanges();
  }

  /**
   * Gets/sets the columns property.
   *
   * @readonly
   * @type {number}
   * @memberof TextBoxComponent
   */
  get cols(): number {
    return this.model.Columns ?? null;
  }

  @MarkForCheck()
  @NotifyChange('Columns')
  set cols(value: number) {
    this.model.Columns = value;
  }

  /**
   * Gets/sets the rows property.
   *
   * @readonly
   * @type {number}
   * @memberof TextBoxComponent
   */
  get rows(): number {
    return this.model.Rows ?? null;
  }

  @MarkForCheck()
  @NotifyChange('Rows')
  set rows(value: number) {
    this.model.Rows = value;
  }

  /**
   * Gets the CssStyle from the model
   *
   * @readonly
   * @type {*}
   * @memberof AspTextBoxComponentComponent
   */
  get cssStyle(): any {
    return this.model?.CssStyle;
  }

  /**
   * lost focus validation utilized in WebForms.
   */
  changeValidationHandler(): void {
    /* c8 ignore else */
    if (this.baseValidator != undefined) {
      this.baseValidator.validate(this.id, this.text);
    }
  }

  /**
   * This is to override the display to prevent the controlsDirective
   * HostBinding
   *
   * @return {*}  {string}
   * @memberof AspTextBoxComponentComponent
   */
  getStyleDisplay(): string {
    return this.cssStyle?.display
      ? this.cssStyle.display
      : super.getStyleDisplay();
  }

  /**
   * Override setMyStyle to use cssStyle property
   *
   * @return {*}  {*}
   * @memberof AspTextBoxComponentComponent
   */
  setMyStyle(): any {
    const setMyStyle = super.setMyStyle();
    const style = setMyStyle ? setMyStyle : {};
    /* c8 ignore else */
    if (this.cssStyle != null) {
      const cssStyleProps = Object.keys(this.cssStyle);
      cssStyleProps.forEach((key) => {
        style[key] = this.cssStyle[key];
      });
    }
    return style;
  }
}