import { Component, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import {
    getUserState,
    UserState,
    CoreState,
} from '@eui/core';
import { Observable, Subscription } from 'rxjs';
import { EclSiteHeaderComponentModule, EclSiteHeaderLoginEvent, EclSiteHeaderSearchEvent } from '@eui/ecl/components/ecl-site-header';
import { EclMenuItemSelectEvent, EclMenuComponentModule } from '@eui/ecl/components/ecl-menu';
import { EclAppComponentModule } from '@eui/ecl/components/ecl-app';
import { EclIconComponentModule } from '@eui/ecl/components/ecl-icon';
import { EclSiteFooterComponentModule } from '@eui/ecl/components/ecl-site-footer';
import { EclBreadcrumbComponentModule } from '@eui/ecl/components/ecl-breadcrumb';
import { EclPageHeaderComponentModule } from '@eui/ecl/components/ecl-page-header';
import { RouterOutlet } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    standalone: true,
    imports: [
        EclAppComponentModule,
        EclBreadcrumbComponentModule,
        EclIconComponentModule,
        EclMenuComponentModule,
        EclPageHeaderComponentModule,
        EclSiteHeaderComponentModule,
        EclSiteFooterComponentModule,
        RouterOutlet,
        TranslateModule,
    ]
})
export class AppComponent implements OnDestroy {
    userInfos: UserState;
    // Observe state changes
    userState: Observable<UserState>;
    // an array to keep all subscriptions and easily unsubscribe
    subs: Subscription[] = [];

    isLoggedIn = false;

    constructor(
        private store: Store<CoreState>,
    ) {
        this.userState = this.store.select(getUserState);
        this.subs.push(this.userState.subscribe((user: UserState) => {
            this.userInfos = { ...user };
        }));
    }

    ngOnDestroy() {
        this.subs.forEach((s: Subscription) => s.unsubscribe());
    }

    onLogin(evt: EclSiteHeaderLoginEvent) {
        this.isLoggedIn = true;
        console.log(evt);
    }

    onLogout(evt: MouseEvent) {
        this.isLoggedIn = false;
        evt.preventDefault();
        console.log('logout');
    }

    onSearch(evt: EclSiteHeaderSearchEvent) {
        console.log(evt);
    }

    onMenuItemSelected(evt: EclMenuItemSelectEvent) {
        console.log('menu item selected', evt);
    }
}
