import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GroupsComponent } from './groups.component';
import { MatInputModule } from '@angular/material/input';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatListModule } from '@angular/material/list';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCardModule } from '@angular/material/card';
import { TranslateModule } from '@ngx-translate/core';
import { JoyrideModule } from 'ngx-joyride';
import { MatMenuModule } from '@angular/material/menu';
import { MatTreeModule } from '@angular/material/tree';
import { TreeNode } from './model/model';
import { LoadingComponent } from '../../shared/loading/loading.component'; // Importa el componente LoadingComponent
import { ExecuteCommandComponent } from '../commands/main-commands/execute-command/execute-command.component';

describe('GroupsComponent', () => {
    let component: GroupsComponent;
    let fixture: ComponentFixture<GroupsComponent>;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [GroupsComponent, ExecuteCommandComponent, LoadingComponent], // Declara LoadingComponent
            imports: [
                HttpClientTestingModule,
                ToastrModule.forRoot(),
                BrowserAnimationsModule,
                MatDividerModule,
                MatFormFieldModule,
                MatInputModule,
                MatIconModule,
                MatButtonModule,
                MatTableModule,
                MatPaginatorModule,
                MatTooltipModule,
                FormsModule,
                ReactiveFormsModule,
                MatProgressSpinnerModule,
                MatDialogModule,
                MatSelectModule,
                MatTabsModule,
                MatAutocompleteModule,
                MatListModule,
                MatCardModule,
                MatMenuModule,
                MatTreeModule,
                TranslateModule.forRoot(),
                JoyrideModule.forRoot(),
            ],
            providers: [
                { provide: MatDialogRef, useValue: {} },
                { provide: MAT_DIALOG_DATA, useValue: { data: { id: 123 } } }
            ]
        }).compileComponents();

        fixture = TestBed.createComponent(GroupsComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    it('should clear selection', () => {
        spyOn(component, 'clearSelection');
        component.clearSelection();
        expect(component.clearSelection).toHaveBeenCalled();
    });

    it('should toggle view', () => {
        component.toggleView('card');
        expect(component.currentView).toBe('card');
        component.toggleView('list');
        expect(component.currentView).toBe('list');
    });

    it('should filter tree', () => {
        const searchTerm = 'test';
        spyOn(component, 'filterTree');
        component.filterTree(searchTerm);
        expect(component.filterTree).toHaveBeenCalledWith(searchTerm);
    });

    it('should add multiple clients', () => {
        spyOn(component, 'addMultipleClients');
        const event = new MouseEvent('click');
        component.addMultipleClients(event);
        expect(component.addMultipleClients).toHaveBeenCalledWith(event);
    });

    it('should expand path to node', () => {
        const node: TreeNode = { id: '1', name: 'Node 1', type: 'type', children: [] };
        spyOn(component, 'expandPathToNode');
        component.expandPathToNode(node);
        expect(component.expandPathToNode).toHaveBeenCalledWith(node);
    });

    it('should handle node click', () => {
        const node: TreeNode = { id: '1', name: 'Node 1', type: 'type', children: [] };
        spyOn<any>(component, 'fetchClientsForNode');
        component.onNodeClick(node);
        expect(component.selectedNode).toBe(node);
        expect(component['fetchClientsForNode']).toHaveBeenCalledWith(node);
    });

    it('should fetch clients for node', () => {
        const node: TreeNode = { id: '1', name: 'Node 1', type: 'type', children: [] };
        spyOn(component['http'], 'get').and.callThrough();
        component.fetchClientsForNode(node);
        expect(component.isLoadingClients).toBeTrue();
        expect(component['http'].get).toHaveBeenCalledWith(`${component.baseUrl}/clients?organizationalUnit.id=${node.id}`);
    });
});