import { Component, OnInit, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import { UserClaims, User } from '../../user/user-claims.class';
import { Router, ActivatedRoute } from '@angular/router';
import { UserService } from '../../user/user.service';
import { RootService } from '../../../_services/root.service';
import { ClientService } from '../clients.service';
import { cstmdummyHFAC } from '../../../_models/cstmdummydata';
import { ItemViewModel } from '../../store/store-model';
import { FormCanDeactivate } from '../../../_guards/form-can-deactivate';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-client-user-register',
  templateUrl: './client-user-register.component.html'
})
export class ClientUserRegisterComponent extends FormCanDeactivate implements OnInit {
  // @ViewChild(`division`) division;
  // @ViewChild(`district`) district;
  // @ViewChild(`tehsil`) tehsil;
  // @ViewChild(`category`) category;
  // @ViewChild(`hfTypeList`) hfType;
  @ViewChild('f')
  form: NgForm;

  private subscription: Subscription;
  public divisions: any[] = [];
  public districts: any[] = [];
  public tehsils: any[] = [];
  public categories: any[] = [];
  public hfTypes: any[] = [];
  public loading: boolean = false;
  public userId: string = '';
  public user: User = new User();
  public roles: any[] = [];
  public rolesData: any[] = [];
  public _userClaims: UserClaims[] = [];
  public userClaim: UserClaims = new UserClaims();
  public comList: any[] = [];
  public _claimsList: any[];
  public _isEdit = false;
  public allSelected = false;

  public selectedFiltersModel: any;
  public dropdata: Array<{ Name: string, Id: number }> = cstmdummyHFAC.slice();

  constructor(private router: Router, private _rootService: RootService,
    private _userService: UserService, private _clientService: ClientService, private route: ActivatedRoute) { super(); }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      const accId = params['id'];
      if (accId != null) {
        this._userService.getRegisterUserById(accId).subscribe((res: any) => {
          console.log(res);
          this.user = res;
          this._isEdit = true;

        }, (err) => {
          this.user = new User();
          this._isEdit = false;
        });
      } else {

      }
    });
    this.getRoles();
    this.getClients();
    this.loadDropdownValues();
    this.getClaimsList();
  }

  selectAll($event) {
    if (this.allSelected == true) {
      this._claimsList.forEach(x => {
        this.user.UserClaimsList.splice(this.user.UserClaimsList.indexOf(x.Value), 1);
      });
      this.user.UserClaimsList = [];
    }
    if (this.allSelected == false) {

      this.user.UserClaimsList = [];
      this._claimsList.forEach(x => {
        this.user.UserClaimsList.push(x.Value);
      });

    }
    this.allSelected = !this.allSelected;
  }

  public isClaimChecked(claim) {
    this.user.UserClaimsList.includes(claim);
    return this.user.UserClaimsList.includes(claim);
  }
  public _claimsToPost = [];
  public checkChanged(value) {
    let checked = this.user.UserClaimsList.includes(value);
    // console.log(this._claimsList);
    // console.log(value);
    // console.log(checked);
    if (checked == false) {
      this.user.UserClaimsList.push(value);
    }
    if (checked == true) {
      this.user.UserClaimsList.splice(this.user.UserClaimsList.indexOf(value), 1);
    }
  }

  public getRoles = () => {
    this._userService.getRoles().subscribe(
      (res: any) => {
        this.roles = res as any;
        this.rolesData = this.roles;
      }
    );
  }

  public getClaimsList() {
    this._userService.getClaimsList().subscribe((res: any) => {
      this._claimsList = res;
      if (this._isEdit == true) {
        this.allSelected = (this.user.UserClaimsList.length == this._claimsList.length) ? true : false;
      }
    }, (err) => {
      console.log(err);
    });
  }
  public getClients = () => {
    this._clientService.getClients().subscribe(
      (res: any) => {
        this.comList = res as any;
      }
    );
  }

  public onSubmit(val) {

    console.log(val);
    console.log(this.user);
    if (this.user.role && this.user.role.length > 0) {
      this.user.roles = this.user.role;
    }
    // this.user.clientId = new ItemViewModel(com.Id, com.Name);

    this._userService.saveUser(this.user).subscribe((response: any) => {
      if (response) {
        console.log(response);
        this.router.navigate(['/clients']);
      }
    }, err => {
      //this. = false;
      this.handleError(err);
    });
  }
  private loadDropdownValues = () => {

  }


  public dropdownValueChanged = (value, filter) => {
    if (!value) { return; }

  }

  public addCodes(value: any[]) {
    let arr: any[] = [];
    value.forEach(val => arr.push(val.Code));
    return arr;
  }
  private handleError(err: any) {
    this.loading = false;
    console.log(err);
  }
}