import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { NavBarService } from '../../../../admin.service';
import { AuthService } from '../../../../../services/auth.service';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
import { environment } from '../../../../../../environments/environment.dev';
@Component({
  selector: 'app-role-tiles',
  templateUrl: './role-tiles.component.html',
  styleUrls: ['./role-tiles.component.scss']
})
export class RoleTilesComponent implements OnInit {

  @Input() roles: any;
  rolDiv: boolean = false;
  colors = ["#E6A9E6", "#F8A9CA", "#6FDCDE", "#F2D2CD", "#F2CCDB", "#BFE2F5", "#D8D0F7", "#6FDCDE", "#EC8ECC"];
  mycolor: any;
  othIcons: boolean = false;
  isRoleEdit: boolean = false;
  errMsg = '';
  successResp: boolean;
  @Output() roleDeleteEvent = new EventEmitter();
  addNewRoleBtn: boolean = false;
  @Output() roleAddEvent = new EventEmitter();
  img_path = environment.imageUrl+'/assets/img/admin/';
  
  @Output() delRolDataEvent = new EventEmitter();
  imageUrl: string = environment.imageUrl;
  
  constructor(private AuthService: AuthService, private toastr: ToastsManager) { }

  ngOnInit() {

    if(this.roles){
      console.log(JSON.stringify(this.roles));
      this.rolDiv = true;
      this.randomColor(this.colors);
    }
  }

  randomColor(c){
    this.mycolor =  c[Math.floor(Math.random() * (c.length-1)) + 0];
    console.log(this.mycolor);
  }

  showTheOtherIcons(id){
    this.othIcons = true;
  }

  editTheRole(id, role){
    this.isRoleEdit = true;
  }
  addRoleUi()  {
    this.isRoleEdit = true;
    this.addNewRoleBtn = true;
    this.roles = {};
  }

  addNewRoleDet(roleName){

    this.errMsg = '';
    console.log('you submitted roleName Role: ', roleName);

    if (roleName == '' || roleName == 'undefined' || roleName == null ){
      this.successResp = false;
      this.errMsg = "Please enter valid role name";

    } else {
      this.AuthService.getAddRole({roleName: roleName}).then(resp => {
        if (resp.status == 'error') {
          console.log(resp, 'getAddRole response error')
          this.successResp = false;
          this.errMsg = resp.message;
        }
        else {
          if (resp.error == null) {
            this.toastr.success('Role added successfully');
            this.isRoleEdit = false;
            this.roleAddEvent.emit(true);  // Just to invoke the getAllRoles method.
          } else {
            console.log(resp, 'Error response');
          }
        }

      }).catch(err => {

        console.log(err)
      })
    }
   }

  updateRoleDet(roleId, role){
    this.errMsg = '';
    // console.log('you submitted value Role: ', role);

    if (role.roleName == '' || role.roleName == 'undefined' || role.roleName== null ){
      this.successResp = false;
      this.errMsg = "Please enter valid role name";

    } else {
      this.AuthService.getEditRole(role).then(resp => {
        if (resp.status == 'error') {
          console.log(resp, 'getEditRole response error')
          this.successResp = false;
          this.errMsg = resp.message;
        }
        else {
          if (resp.error == null) {
            this.toastr.success('Role Updated successfully');
          } else {
            console.log(resp, 'Error response');
            this.toastr.warning('Role update pending');
          }
        }
        }).catch(err => {
        console.log(err);
        this.toastr.error(err);
        })
        this.isRoleEdit = false;
        this.othIcons = false;
        //document.getElementById('closeModalButton').click();
      }
  }

  deleteTheRole(id, role){
    console.log('Deleting item: ', JSON.stringify(role));
    this.delRolDataEvent.emit(role);
   
  }

  cancelRoleForm(id, role){
    this.isRoleEdit = false;
    this.othIcons = false;
  }
}
