import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core'
import { UserResponse } from '@api-client/angular'
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
import { map, Observable } from 'rxjs'
import { AuthService } from '../../../auth'
import {
	FuseNavigationService,
	FuseVerticalNavigationComponent,
	Navigation,
	NavigationService,
} from '../../../navigation'
import { FuseMediaWatcherService, RouterUtilsService } from '../../../shared'
import { TranslocoDirective } from '@jsverse/transloco'
import { HeaderComponent } from '../../common/header/header.component'
import { RouterOutlet } from '@angular/router'
import { AsyncPipe } from '@angular/common'
import { LucideArrowLeftFromLine } from '@lucide/angular'

@UntilDestroy({ checkProperties: true })
@Component({
	// eslint-disable-next-line @angular-eslint/component-selector
	selector: 'classic-layout',
	templateUrl: './classic.component.html',
	encapsulation: ViewEncapsulation.None,
	imports: [
		TranslocoDirective,
		FuseVerticalNavigationComponent,
		HeaderComponent,
		RouterOutlet,
		AsyncPipe,
		LucideArrowLeftFromLine,
	],
})
export class ClassicLayoutComponent implements OnInit {
	isScreenSmall = false
	navigation: Navigation | undefined
	user$: Observable<UserResponse>
	bgClass: string | undefined
	private readonly _authService = inject(AuthService)
	private readonly _navigationService = inject(NavigationService)
	private readonly _routeUtilsService = inject(RouterUtilsService)
	private readonly _fuseNavigationService = inject(FuseNavigationService)
	private readonly _fuseMediaWatcherService = inject(FuseMediaWatcherService)

	constructor() {
		this.user$ = this._authService.userData$.pipe(map((user) => user as UserResponse))

		this._routeUtilsService.bgClass$.pipe(untilDestroyed(this)).subscribe({
			next: (bgClass) => (this.bgClass = bgClass),
		})
	}

	ngOnInit(): void {
		this._navigationService.navigation$.pipe(untilDestroyed(this)).subscribe((navigation: Navigation) => {
			this.navigation = navigation
		})

		this._fuseMediaWatcherService.onMediaChange$.pipe(untilDestroyed(this)).subscribe(({ matchingAliases }) => {
			this.isScreenSmall = !matchingAliases.includes('xl')
		})
	}

	toggleNavigation(name: string): void {
		const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name)

		if (navigation) navigation.toggle()
	}

	logout(): void {
		this._authService.logout()
	}
}