import { ChangeDetectorRef } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ActivatedRoute } from '@angular/router';
import { PageBreadcrumbsComponent } from '@components/page/breadcrumds/page-breadcrumbs.component';
import { FeedbackButtonComponent } from '@components/page/feedback/button/feedback-button.component';
import { FeedbackFormComponent } from '@components/page/feedback/form/feedback-form.component';
import { PageLayoutComponent } from '@components/page/layout/page-layout.component';
import { TranslateService } from '@ngx-translate/core';
import { getMockPipe } from '@shared/pipes/pipe.mock';
import { FeatureFlagsService } from '@shared/services/feature-flags.service';
import { TitleComponent } from '@toolkit/title/title.component';
import { BreadcrumbModule } from 'primeng/breadcrumb';
import { TooltipModule } from 'primeng/tooltip';
import { BehaviorSubject } from 'rxjs';

describe('PageLayoutComponent', () => {
    let component: PageLayoutComponent;
    let fixture: ComponentFixture<PageLayoutComponent>;
    let featureFlags: FeatureFlagsService;
    let hostElement: HTMLElement;

    const instantMock = jasmine.createSpy('instant');

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [
                PageLayoutComponent,
                PageBreadcrumbsComponent,
                FeedbackButtonComponent,
                FeedbackFormComponent,
                TitleComponent,
                getMockPipe('translate'),
            ],
            providers: [
                FeatureFlagsService,
                {
                    provide: TranslateService,
                    useValue: {
                        instant: instantMock,
                    },
                },
                {
                    provide: ActivatedRoute,
                    useValue: {
                        data: new BehaviorSubject({}),
                    },
                },
            ],
            imports: [BreadcrumbModule, TooltipModule],
        }).compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(PageLayoutComponent);
        component = fixture.componentInstance;
        hostElement = fixture.nativeElement;
        featureFlags = TestBed.inject(FeatureFlagsService);

        instantMock.calls.reset();
    });

    it('should return object with page-layout__title class if feedback feature is enabled', () => {
        featureFlags.FEEDBACK_BUTTON_AVAILABLE = true;

        expect(component.pageLayoutTitleClasses).toEqual({
            'page-layout__title': true,
            'page-layout__title--fullwidth': false,
        });
    });

    it('should return object with all classes if feedback feature is disabled', () => {
        expect(component.pageLayoutTitleClasses).toEqual({
            'page-layout__title': true,
            'page-layout__title--fullwidth': true,
        });
    });

    it('should not render feedback button component', () => {
        const button = hostElement.querySelector('feedback-button');
        expect(button).toBe(null);
    });

    it('should render feedback button component', () => {
        featureFlags.FEEDBACK_BUTTON_AVAILABLE = true;
        fixture.detectChanges();

        const button = hostElement.querySelector('feedback-button');
        expect(button).not.toBe(null);
    });

    it('should not render scroll overlay if withScrollOverlay is false', () => {
        fixture.detectChanges();
        let overlay = hostElement.querySelector('.page-layout__scroll-overlay');
        expect(overlay).toBeDefined();

        component.withScrollOverlay = false;
        const changeDetectorRef =
            fixture.debugElement.injector.get<ChangeDetectorRef>(
                ChangeDetectorRef,
            );
        changeDetectorRef.detectChanges();

        overlay = hostElement.querySelector('.page-layout__scroll-overlay');
        expect(overlay).toBe(null);
    });
});
