import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
import { FormArray, FormGroup, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { catchError, map, of } from 'rxjs';
import { BaseService } from 'src/app/shared/service/base.service';
import { ToastService } from 'src/app/toast/toast-service';


@Component({
  selector: 'app-role-properties',
  templateUrl: './role-properties.component.html',
  styleUrl: './role-properties.component.scss'
})

export class RolePropertiesComponent implements OnInit{
  @ViewChild('scrollDataModal', { static: true }) scrollDataModal: TemplateRef<any>;

  @Input() role: any;

  @Output() roleAdded = new EventEmitter<void>();

  permissions: any; // Example permissions list
  availablePermissions:any // Example available permissions
  // selectedPermission: any = null; // Selected permission object
  selectedPermissions: any[] = [];
  submitted = false;
  error = '';
  successmsg = false;

  constructor(private formBuilder: UntypedFormBuilder, 
    private modalService: NgbModal,
    public baseService: BaseService,
  ) { }

    ngOnInit() {
    }

    ngAfterViewInit() {
    }


    onSubmit() {
      this.submitted = true;
    }

    getPermission(){
      this.baseService.getData('access/permissions').pipe(
        map((data: any) => {
          console.log(data);
          this.availablePermissions=data;
          this.updateAvailablePermissions();
        }),
        catchError(err => {
          console.log(err);
          return of([]);
        })
      ).subscribe(
        
      );
    }

    openModal() {
      this.modalService.open(this.scrollDataModal, { scrollable: true ,windowClass:'modal-holder', centered: true, backdrop: "static"});
      this.getPermission();
      console.log(this.role);
      this.permissions=this.role.permission;
    }

    deletePermission(permission:any,index: number) {
      // Perform deletion logic here, e.g., remove from permissions array
      this.permissions.splice(index, 1);
      this.baseService.deleteData(`access/roles/${this.role.name}/permissions/${permission.permission}`).subscribe(
        (response: any) => {
          if (response) {
            console.log('Role deleted successfully');
            this.availablePermissions.push(permission)
          }
        },
        (err) => {
        }
      );
    }

    addPermission() {
      this.selectedPermissions.forEach(permission => {
        if (!this.permissions.some(p => p.permission === permission.permission)) {
          this.permissions.push(permission);
          this.updateAvailablePermissions();
          this.baseService.postData1(`access/roles/${this.role.name}/permissions/${permission.permission}`).subscribe(
            (response: any) => {
              if (response) {
                console.log('Permission added successfully');
              }
            },
            (err) => {
              console.log(err);
            }
          );
        }
      });
      this.selectedPermissions = []; // Clear the selected permissions after adding
    }

    dismissModal(reason: string) {
      // this.modalRef?.dismiss(reason);
      this.modalService.dismissAll();
      this.emitCloseEvent();
    }
  
    emitCloseEvent() {
      this.roleAdded.emit(); // Emit event to notify parent component
    }


  updateAvailablePermissions() {
    this.availablePermissions = this.availablePermissions.filter(p => !this.permissions.some(pp => pp.permission === p.permission));
  }
   
}