import { Component, DestroyRef, inject, OnInit } from '@angular/core';

import { Router, RouterLink, RouterLinkActive } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Observable, Subscription } from 'rxjs';

import { User } from '@models';
import { UserService } from '@services';

@Component({
    selector: 'app-layout-header',
    templateUrl: './header.component.html',
    imports: [
        RouterLink,
        RouterLinkActive,
        MatToolbarModule,
        MatButtonModule,
        MatDividerModule,
        MatIconModule,
        MatMenuModule,
    ],
})
export class HeaderComponent implements OnInit {
    private router = inject(Router);
    private userService = inject(UserService);

    private _currentUser: Subscription = new Subscription();
    private _isAuthenticated: Subscription = new Subscription();
    private isAuthenticated = false;
    currentUser: User = {} as User;
    destroyRef = inject(DestroyRef);

    ngOnInit() {
        const user$: Observable<User> = this.userService.currentUser.pipe(takeUntilDestroyed(this.destroyRef));
        this._currentUser = user$.subscribe((userData) => {
            this.currentUser = userData;
        });
        const auth$: Observable<boolean> = this.userService.isAuthenticated.pipe(takeUntilDestroyed(this.destroyRef));
        this._isAuthenticated = auth$.subscribe((value) => {
            this.isAuthenticated = value;
        });
    }

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

    isLogged(): boolean {
        return this.isAuthenticated;
    }

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