import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, RouterOutlet, RouterLink, RouterModule } from '@angular/router';
import { MediaMatcher } from '@angular/cdk/layout';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatMenuModule } from '@angular/material/menu';
import { Observable, Subscription } from 'rxjs';


import { User } from 'src/app/core/models';
import { UserService } from 'src/app/core/services';
import { MenuItems, ShowAuthedDirective, SpinnerComponent, AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective } from 'src/app/components/shared';
import { HeaderComponent, FooterComponent } from 'src/app/components/shared/layout';


/** @title Responsive sidenav */
@Component({
    selector: 'huapp-full-layout',
    standalone: true,
    imports: [
        CommonModule, RouterModule, RouterOutlet,
        MatBadgeModule, MatButtonModule, MatIconModule, MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule,
        ShowAuthedDirective, SpinnerComponent, HeaderComponent, FooterComponent,
        AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective
    ],
    providers: [ MenuItems ],
    templateUrl: 'full.component.html',
    styleUrls: []
})
export class FullComponent implements OnInit, OnDestroy {
    private _currentUser: Subscription = new Subscription();
    private _mobileQueryListener: () => void;
    mobileQuery: MediaQueryList;
    currentUser: User = {} as User;
    showQCMMenu = false;
    today: number = Date.now();
    siteLink = 'https://www.rampeur.com';
    author = 'Solide Apps';

    constructor(
        private router: Router,
        private userService: UserService,
        changeDetectorRef: ChangeDetectorRef,
        media: MediaMatcher,
        public menuItems: MenuItems
    ) {
        this.mobileQuery = media.matchMedia('(min-width: 768px)');
        this._mobileQueryListener = () => changeDetectorRef.detectChanges();
        this.mobileQuery.addListener(this._mobileQueryListener);
    }

    ngOnInit() {
        const user$: Observable<User> = this.userService.currentUser;
        this._currentUser = user$.subscribe(
            (userData) => {
                this.currentUser = userData;
            }
        );
    }

    ngOnDestroy(): void {
        this._currentUser.unsubscribe();
        this.mobileQuery.removeListener(this._mobileQueryListener);
    }

    goToGitHub() {
        window.open('https://github.com/rampeur', '_blank');
    }

    logout() {
        this.userService.purgeAuth();
        this.router.navigateByUrl('/login');
    }
}
