import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { LocationService, UserService } from '@app/_services';
import { CustomErrorStateMatcher } from '@app/_helpers';
import { first } from 'rxjs/operators';
import { AreaName, Category } from '@app/_models';

@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: CustomErrorStateMatcher = new CustomErrorStateMatcher();
  submitted: boolean = false;
  categories: Array<Category>;
  areaNames: Array<AreaName>;
  accountTypes: Array<string>;
  genders: Array<string>;

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

  async ngOnInit(): Promise<void> {
    await this.userService.init();
    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.userService
      .getCategories()
      .pipe(first())
      .subscribe((res) => (this.categories = res));
    this.locationService
      .getAreaNames()
      .pipe(first())
      .subscribe((res) => (this.areaNames = res));
    this.userService
      .getAccountTypes()
      .pipe(first())
      .subscribe((res) => (this.accountTypes = res));
    this.userService
      .getGenders()
      .pipe(first())
      .subscribe((res) => (this.genders = res));
  }

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

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