// 201811190001 @auth:hz @Description:  删除关于表单检验的代码
// 2018/11/18 @auth:hz @Description:修复页面显示延迟于后台数据的缺陷

import {
  Component,
  OnInit,
  OnDestroy,
  Inject,
  ChangeDetectorRef,
  ChangeDetectionStrategy,
  forwardRef,
} from '@angular/core';
import {
  ControlValueAccessor,
  FormGroup,
  FormBuilder,
  FormControl,
  Validators,
  NG_VALIDATORS,
  NG_VALUE_ACCESSOR,
} from '@angular/forms';
import {
  map,
  distinctUntilChanged,
  filter,
  debounceTime,
  startWith,
  skip,
} from 'rxjs/operators';
import { Subscription } from 'rxjs';
// import { UserService } from '@services';
// import { createAccessDetailByAccessNo } from 'app/util/access.util';
import { AbstractControl } from '@angular/forms';
import { LoginTypeFactory } from '../util/loginType';

@Component({
  selector: 'passport-login-type',
  templateUrl: 'login-type.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => LoginTypeComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => LoginTypeComponent),
      multi: true,
    },
  ],
})
/**
 * -执行
 * 1.InitializeFormBuild(表单控件构建),
 * 2.ControlObserverHandle(建立对accessNo变化的可观察对象,得到LoginType,写入表单值)
 *
 * -被调用
 * 3.父组件调用setParentForm,得到表单值
 *
 * -Input: AccessNo
 * -Output: UserName,Mobile
 */
export class LoginTypeComponent
  implements ControlValueAccessor, OnInit, OnDestroy {
  form: FormGroup;
  error = '';

  private subscription: Subscription;
  // noinspection JSUnusedLocalSymbols
  private propagateChange = (_: any) => {};

  constructor(
    private fb: FormBuilder,
    private ref: ChangeDetectorRef,
              ) {
  }
  InitializeFormBuild() {
    this.form = this.fb.group({
      accessNo: [null, [Validators.required, Validators.minLength(5)]],
      userName: [null, [Validators.required, Validators.minLength(5)]],
      mobile: [null, [Validators.required, Validators.pattern(/^1\d{10}$/)]],
    });
  }

  // noinspection JSUnusedGlobalSymbols
  ngOnInit() {
    this.InitializeFormBuild();
    this.ControlObserverHandle(
      this.form.get('accessNo'),
      str => LoginTypeFactory.createLogObj(str).toJSON(),
    );
    // LoginTypeFactory.createLogObj( this.form.get('accessNo').value ).toJSON()
  }
  /**
   * 观察logInfo,对用户信息进行实时反馈,既fn处理后结果写入表单
   */
  ControlObserverHandle(control$: AbstractControl, toJSON: (...any) => {} ) {
    this.subscription = control$.valueChanges
      .pipe(
        // hint startWith(c_accessNo.value + ''), // 会变为"null",不好处理
        startWith(control$.value),
        debounceTime(300), // hint: 立刻要反馈的验证信息.但这就不能debounceTime,可以用变化检测
        distinctUntilChanged(),
        // filter((value) => value !== null),
        skip(1),
        // hint: toJSON is parm
        map(val => toJSON(val)),
//        switchAll(), // hint: distinctUntilChanged is not with switch
      )
        // 将值写入表单中
      .subscribe({
        // 处理返回值,PS:不用返回
        next: val => {
          this.form.patchValue(val, { emitEvent: false }); // html需要获取值并校验,不可删除
          this.form.getRawValue();
          this.ref.detectChanges(); // hint
        },
        error: err => console.error('have a error in ControlObserverHandle', err),
      });
  }

  // region: fields

  get userName() {
    return this.form.controls.userName;
  }

  get mobile() {
    return this.form.controls.mobile;
  }

  // endregion

  // noinspection JSUnusedGlobalSymbols
  public writeValue() {
  }

  // 当表单控件值改变时，函数 fn 会被调用
  // 这也是我们把变化 emit 回表单的机制
  // noinspection JSUnusedGlobalSymbols
  public registerOnChange(fn: any) {
    this.propagateChange = fn;
  }

  // 这里没有使用，用于注册 touched 状态
  // noinspection JSUnusedGlobalSymbols
  public registerOnTouched() {
  }

  // fixme
  // 因为实时会去检查输入的格式,
  // it would call registerOnChange(); through this.propagateChange(v)
  setParentForm() {
    const returnJSON = LoginTypeFactory.createLogObj( this.form.get('accessNo').value ).SimpleJSON();
    this.propagateChange(returnJSON);
  }

  // 验证表单，验证结果正确返回 null 否则返回一个验证结果对象
  // noinspection JSUnusedGlobalSymbols
  validate(c: FormControl): { [key: string]: any } | null {
    if (!c.value) {
      return null;
    }
  }

  // noinspection JSUnusedGlobalSymbols
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}