// app.js

const { Inject,  Component, OnInit , VERSION} = ng.core;
const { FormBuilder , FormGroup, Validators } = ng.forms;

class CustomValidators {
  
  static requiredWhen(requiredControlName, controlToCheckName) {
    return (control: AbstractControl) => {
      const required = control.get(requiredControlName);
      const toCheck = control.get(controlToCheckName);
      if (required.value || !toCheck.value) {
        removeErrors(['required'], required);
        return null;
      }
      const errorValue = `${requiredControlName}_Required_When_${controlToCheckName}`;
      setErrors({required: errorValue}, required);
      return {[errorValue]: true};
    };
  }

  static requiredEither(requiredControlName, controlToCheckName) {
    return (control) => {
      const required = control.get(requiredControlName);
      const toCheck = control.get(controlToCheckName);
      if (required.value || toCheck.value) {
        removeErrors(['required'], required);
        removeErrors(['required'], toCheck);
        return null;
      }
      const errorValue = `${requiredControlName}_Required_Either_${controlToCheckName}`;
      setErrors({required: errorValue}, required);
      setErrors({required: errorValue}, toCheck);
      return {[errorValue]: true};
    };
  }


  static requiredWhenNot(requiredControlName, controlToCheckName) {
    return (control) => {
      const required = control.get(requiredControlName);
      const toCheck = control.get(controlToCheckName);
      if (required.value || toCheck.value) {
        removeErrors(['required'], required);
        return null;
      }
      const errorValue = `${requiredControlName}_Required_When_Not_${controlToCheckName}`;
      setErrors({required: errorValue}, required);
      return  {[errorValue]: true};
    };
  }

}

function setErrors(error: {[key: string]: any }, control: AbstractControl) {
  control.setErrors({...control.errors, ...error});
}

function  removeErrors(keys: string[], control: AbstractControl) {
  const remainingErrors = keys.reduce((errors, key) => {
    delete  errors[key];
    return errors;
  }, {...control.errors});
  control.setErrors(Object.keys(remainingErrors).length > 0 ? remainingErrors : null);
}

@Component({
  selector: 'my-app',
  template: `
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <h2>Angular Reactive Form | Custom Transitive Validators</h2>
    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <label>First Name</label>
                        <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid':  f.firstName.errors }" />
                        <div *ngIf="f.firstName.errors" class="invalid-feedback">
                            <div *ngIf="f.firstName.errors.required">First Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Phone</label>
                        <input type="text" formControlName="phone" class="form-control" [ngClass]="{ 'is-invalid': f.phone.errors }" />
                        <div *ngIf="f.phone.errors" class="invalid-feedback">
                            <div *ngIf="f.phone.errors.required">Phone number is required ({{f.phone.errors.required}}).</div>
                            <div *ngIf="f.phone.errors.pattern">Phone number must match pattern digits</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': f.email.errors }" />
                        <div *ngIf="f.email.errors" class="invalid-feedback">
                            <div *ngIf="f.email.errors.required">Email is required ({{f.email.errors.required}}).</div>
                            <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button [disabled]="registerForm.invalid" type="submit" class="btn btn-primary">Register</button>
                    </div>
                </form>

<pre *ngIf="registerForm.invalid"> {{ registerForm.errors | json  }} </pre>

           </div>
        </div>
    </div>
</div>
  `
})
class AppComponent implements OnInit  {

registerForm: FormGroup;
    submitted = false;
  
  constructor( @Inject(FormBuilder) private formBuilder: FormBuilder) {}

   ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstName: ['', Validators.required],
            phone: ['', [Validators.pattern('[0-9]*')]],
            email: ['', [ Validators.email]]
        },
        {
          validator: [
            CustomValidators.requiredEither('email', 'phone')
          ]
        }                                           
       );
    }
 
    // convenience getter for easy access to form fields
    get f() { return this.registerForm.controls; }
 
    onSubmit() {
        this.submitted = true;
 
        // stop here if form is invalid
        if (this.registerForm.invalid) {
            return;
        }
        alert(`Submitted -> ${JSON.stringify(this.registerForm.value)}`);
    }

}

// main.js
const { BrowserModule } = ng.platformBrowser;
const { NgModule } = ng.core;
const { CommonModule } = ng.common;
const { ReactiveFormsModule } =  ng.forms

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    CommonModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: []
})
class AppModule {}

const { platformBrowserDynamic } = ng.platformBrowserDynamic; 

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));