import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {LocationService} from '@app/_services';
import {CustomErrorStateMatcher} from '@app/_helpers';

@Component({
  selector: 'app-create-account',
  templateUrl: './create-account.component.html',
  styleUrls: ['./create-account.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CreateAccountComponent implements OnInit {
  createForm: FormGroup;
  matcher = new CustomErrorStateMatcher();
  submitted: boolean = false;
  locations: any;

  constructor(
    private formBuilder: FormBuilder,
    private locationService: LocationService
  ) { }

  ngOnInit(): void {
    this.createForm = this.formBuilder.group({
      accountType: ['', Validators.required],
      idNumber: ['', Validators.required],
      phoneNumber: ['', Validators.required],
      givenName: ['', Validators.required],
      surname: ['', Validators.required],
      directoryEntry: ['', Validators.required],
      location: ['', Validators.required],
      gender: ['', Validators.required],
      referrer: ['', Validators.required],
      businessCategory: ['', Validators.required]
    });
    this.locationService.getLocations();
    this.locationService.locationsSubject.subscribe(locations => {
      this.locations = locations;
    });
  }

  get createFormStub(): any { return this.createForm.controls; }

  onSubmit(): void {
    this.submitted = true;
    if (this.createForm.invalid || !confirm('Create account?')) { return; }
    this.submitted = false;
  }

  public trackByName(index, item): string {
    return item.name;
  }
}