import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
import { Country, countries_and_timezones, UserRegistration } from 'tournee.businesslogic';
import { AuthenticationService } from 'src/app/shared/services/authentication.service';
import { FeedbackPanelComponent } from 'src/app/shared/components/feedback-panel/feedback-panel.component';
import { Observable, fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators'
import { FormGroup } from '@angular/forms';
import { UtilityService } from 'src/app/shared/services/utility.service';
import { AuthService } from 'src/app/shared/services/auth.service';

@Component({
  selector: 'app-register-form',
  templateUrl: './register-form.component.html',
  styleUrls: ['./register-form.component.css'],
  providers: [AuthenticationService]
})
export class RegisterFormComponent implements OnInit {
  @ViewChild('FeedbackPanel') FeedbackPanel:FeedbackPanelComponent;
  @ViewChild('nickname') nickname:ElementRef;
  @ViewChild('registerForm') registerForm: FormGroup;
  Countries: Array<Country> = [];
  isWorking: boolean = false;
  @Input() User: UserRegistration = new UserRegistration();
  @Input() Title: string = "Register";
  validatingNickname: boolean = false;
  nicknameNotUnique: boolean = false;
  nicknameUnique: boolean = false;
  public input : Observable<string>;
  country_filter_text: string;

  constructor(private _authentication: AuthenticationService,
    private _auth: AuthService,
    public utility: UtilityService) { }

  ngOnInit() {
    this.Countries = countries_and_timezones.get_all_countries().sort((a, b) => { return a.name.localeCompare(b.name); });
  }

  ngAfterViewInit() {
    this.input = fromEvent(this.nickname.nativeElement, 'input')
    .pipe(
       debounceTime(300),
       map((e: KeyboardEvent) => e.target['value'])
    );

   this.input.subscribe((val: string) => {
       this.nicknameChanged(val);
    });
  }

  register() {
    if (this.isWorking) {
      return;
    }
    this.isWorking = true;
    this.FeedbackPanel.reset();
    this._authentication.register(this.User)
    .then((result) => {
      return this._auth.loginSuccess(result.result);
    })
    .catch((err) => {
      this.isWorking = false;
      if (err.error.message == 'duplicate key value violates unique constraint "user_nickname_unique"') {
        err = {
          error : {
            message: 'That nickname has already been taken. Please choose another'
          }
        };
      }
      this.FeedbackPanel.triggerError(err);
    });
  };

  nicknameChanged($event: string) {
    this.validatingNickname = true;
    this.nicknameNotUnique = false;
    this.nicknameUnique = false;
    if ($event == '') {
      this.validatingNickname = false;
      return;
    }
    this._authentication.validateNickname($event)
    .then((result) => {
      this.validatingNickname = false;
      if (result.result) {
        this.nicknameUnique = true;
        this.nicknameNotUnique = false;
      } else {
        this.registerForm.controls['nickname'].setErrors({
          notUnique: true
        });
        this.nicknameUnique = false;
        this.nicknameNotUnique = true;
      }
    })
    .catch((err) => {
      console.log(err);
    });
  }
  FilteredCountries() {
    if (this.country_filter_text) {
      return this.Countries.filter((c) => { return c.name.toLowerCase().indexOf(this.country_filter_text.toLowerCase()) != -1});
    }
    return this.Countries;
  }
}