import {
  ExtensibleModule,
  EXTENSIONS_IDENTIFIER,
  FormPropData,
  generateFormFromProps,
} from '@abp/ng.components/extensible';
import { PageModule } from '@abp/ng.components/page';
import {
  CoreModule,
  ListResultDto,
  ListService,
  LocalizationModule,
  PagedAndSortedResultRequestDto,
  PagedResultDto,
} from '@abp/ng.core';
import { IdentityRoleCreateDto, IdentityRoleDto, IdentityRoleService, IdentityRoleUpdateDto } from '@abp/ng.identity/proxy';
import {
  ThemeSharedModule,
  ConfirmationService,
  ToasterService,
  Confirmation,
} from '@abp/ng.theme.shared';
import { CommonModule } from '@angular/common';
import { Component, inject, Injector, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormsModule, UntypedFormGroup, Validators } from '@angular/forms';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
import { finalize } from 'rxjs';
import { ePermissionManagementComponents } from '@abp/ng.permission-management';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { eIdentityComponents } from '@abp/ng.identity';
import { PermissionManagementModule } from '@abp/ng.permission-management';
import {  NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
import { MenuItem } from 'primeng/api';
import { Dropdown, DropdownModule } from 'primeng/dropdown';

@Component({
  selector: 'app-custom-roles',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    TableModule,
    ButtonModule,
    PageModule,
    LocalizationModule,
    ThemeSharedModule,
    NgxDatatableModule,
    ExtensibleModule,
    PermissionManagementModule,
    CoreModule,
    NgbNavModule,
    DropdownModule
  ],
  templateUrl: './custom-roles.component.html',
  providers: [
    ListService,
    {
      provide: EXTENSIONS_IDENTIFIER,
      useValue: eIdentityComponents.Roles,
    },
  ],
  styleUrl: './custom-roles.component.scss',
})
export class CustomRolesComponent implements OnInit {
  protected readonly list = inject(ListService<PagedAndSortedResultRequestDto>);
  protected readonly confirmationService = inject(ConfirmationService);
  protected readonly toasterService = inject(ToasterService);
  private readonly injector = inject(Injector);
  protected readonly service = inject(IdentityRoleService);

  data: PagedResultDto<IdentityRoleDto> = { items: [], totalCount: 0 };

  form!: UntypedFormGroup;

  selected?: IdentityRoleDto;

  isModalVisible!: boolean;

  visiblePermissions = false;

  providerKey?: string;

  modalBusy = false;

  permissionManagementKey = ePermissionManagementComponents.PermissionManagement;

  onVisiblePermissionChange = (event: boolean) => {
    this.visiblePermissions = event;
  };

  ngOnInit() {
   
    this.hookToQuery();
  }

  // buildForm() {
  //   const data = new FormPropData(this.injector, this.selected);
  //   this.form = generateFormFromProps(data);
  // }
  buildForm() {
    this.form = new FormGroup({
      name: new FormControl(this.selected?.name || '', Validators.required),
      isDefault: new FormControl(this.selected?.isDefault || false),
      isPublic: new FormControl(this.selected?.isPublic || false)
    });
  
  }
   
  openModal() {
    this.buildForm();
    this.isModalVisible = true;
  }

  add() {
    debugger
    // this.selected = {} as IdentityRoleDto;
    // this.openModal();
    this.selected = { name: '', isDefault: false, isPublic: false } as IdentityRoleDto;
    this.isModalVisible = true;
  }

  edit(id: string) {
    debugger
    // this.service.get(id).subscribe(res => {
    //   this.selected = res;
    //   this.openModal();
    // });
    this.service.get(id).subscribe(res => {
      this.selected = res;
      this.isModalVisible = true;
    });
  }

  // save() {
  //   debugger
  //   if (!this.form.valid) return;
  //   this.modalBusy = true;

  //   const { id } = this.selected || {};
  //   (id
  //     ? this.service.update(id, { ...this.selected, ...this.form.value })
  //     : this.service.create(this.form.value)
  //   )
  //     .pipe(finalize(() => (this.modalBusy = false)))
  //     .subscribe(() => {
  //       this.isModalVisible = false;
  //       this.toasterService.success('AbpUi::SavedSuccessfully');
  //       this.list.get();
  //     });
  // }
  save() {
    debugger
    if (!this.selected?.name) {
      return;
    }
  
    this.modalBusy = true;
  
    const { id, name, isDefault, isPublic, concurrencyStamp } = this.selected;
  
    const roleDto = {
      name,
      isDefault,
      isPublic,
      concurrencyStamp
    };
  
    const saveObservable = id
      ? this.service.update(id, roleDto)  // Update call
      : this.service.create(roleDto);    // Create call
  
    saveObservable
      .pipe(finalize(() => (this.modalBusy = false)))  
      .subscribe(() => {
        this.isModalVisible = false;
        this.toasterService.success('AbpUi::SavedSuccessfully');
        this.list.get();
      });
  }
  
  
  
  delete(id: string, name: string) {
    this.confirmationService
      .warn('AbpIdentity::RoleDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', {
        messageLocalizationParams: [name],
      })
      .subscribe((status: Confirmation.Status) => {
        if (status === Confirmation.Status.confirm) {
          this.toasterService.success('AbpUi::DeletedSuccessfully');
          this.service.delete(id).subscribe(() => this.list.get());
        }
      });
  }

  private hookToQuery() {
    this.list.hookToQuery(query => this.service.getList(query)).subscribe(res => (this.data = res));
  }

  openPermissionsModal(providerKey: string) {
    this.providerKey = providerKey;
    setTimeout(() => {
      this.visiblePermissions = true;
    }, 0);
  }

  sort(data: any) {
    const { prop, dir } = data.sorts[0];
    this.list.sortKey = prop;
    this.list.sortOrder = dir;
  }
}