import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { Router, RouterOutlet, RouterModule } from '@angular/router';
import { MediaMatcher } from '@angular/cdk/layout';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
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 { Menu, User } from '@models';
import { UserService } from '@services';
import { MenuItems, ShowAuthedDirective, AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective } from '@components/shared';
//import { SpinnerComponent } from '@components/shared';
//import { HeaderComponent, FooterComponent } from '@components/shared/layout';
import { FooterComponent } from '@components/shared/layout';


/** @title Responsive sidenav */
@Component({
    selector: 'app-full-layout',
    standalone: true,
    imports: [
        RouterModule, RouterOutlet,
        MatBadgeModule, MatButtonModule, MatDividerModule,
        MatIconModule, MatListModule, MatMenuModule,
        MatSidenavModule, MatToolbarModule,
        ShowAuthedDirective, AccordionAnchorDirective,
        AccordionLinkDirective, AccordionDirective,
        FooterComponent
        //HeaderComponent,
        //SpinnerComponent
    ],
    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;
    today: number = Date.now();
    siteLink = 'https://www.adastra-cbd.com';
    author = 'Ad Astra';
    links: Menu[] = [];
    visibleMenu: string[] = [];
    //visibleMenu: string[] = ['products', 'page'];
    //visibleMenu: string[] = ['products'];

    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;
                if (this.currentUser.role === 'Admin') {
                    this.links = this.menuItems.getMenuItemsAdmin();
                    //this.links = this.menuItems.getMenuItems();
                } else {
                    this.links = this.menuItems.getMenuItems();
                }
            }
        );
    }

    getMenuItems(): Menu[] {
        return this.links;
    }

    isVisibleMenu(state: string): boolean {
        const indexOf: number = this.visibleMenu.indexOf(state);
        if (indexOf !== -1) {
            return true;
        } else {
            return false;
        }
    }

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

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

    toggleShowMenu(state: string) {
        const indexOf: number = this.visibleMenu.indexOf(state);
        if (indexOf !== -1) {
            this.visibleMenu.splice(indexOf, 1);
        } else {
            this.visibleMenu.push(state);
        }
    }

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