import { Component, OnInit, Signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {
    UserService,
    UserState,
} from '@eui/core';
import { EclAppModule } from '@eui/ecl/components/ecl-app';
import { EclBreadcrumbModule } from '@eui/ecl/components/ecl-breadcrumb';
import { EclIconModule } from '@eui/ecl/components/ecl-icon';
import { EclMenuItemSelectEvent, EclMenuModule } from '@eui/ecl/components/ecl-menu';
import { EclLinkModule } from '@eui/ecl/components/ecl-link';
import { EclPageHeaderModule } from '@eui/ecl/components/ecl-page-header';
import { EclSiteFooterModule } from '@eui/ecl/components/ecl-site-footer';
import { EclSiteHeaderLoginEvent, EclSiteHeaderModule, EclSiteHeaderSearchEvent } from '@eui/ecl/components/ecl-site-header';
import { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    standalone: true,
    imports: [
        EclAppModule,
        EclBreadcrumbModule,
        EclIconModule,
        EclLinkModule,
        EclMenuModule,
        EclPageHeaderModule,
        EclSiteHeaderModule,
        EclSiteFooterModule,
        RouterOutlet,
        TranslateModule,
    ]
})
export class AppComponent implements OnInit {

    isLoggedIn = false;
    userState: Signal<UserState>;
    userInfos: UserState;

    constructor(private userService: UserService<UserState>,) { }

    ngOnInit(): void {
        this.userState = this.userService.getSignal();
        this.userInfos = this.userState();
    }

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

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

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

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