import { Component, inject, OnInit } from "@angular/core";
import { Router, RouterLink, RouterOutlet } from "@angular/router";

import { DomSanitizer } from "@angular/platform-browser";
import { MatToolbarModule } from "@angular/material/toolbar";
import {
    IconResolver,
    MatIconModule,
    MatIconRegistry,
} from "@angular/material/icon";
import { MatSelectModule } from "@angular/material/select";
import { MatOptionModule } from "@angular/material/core";
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatListModule } from "@angular/material/list";
import {
    TranslateService,
    TranslateModule,
    TranslatePipe,
} from "@ngx-translate/core";

import { User } from "../models/user";
import { CacheApiKey } from "../models/cache-api-key.enum";

import { AuthenticationService } from "../services/authentication.service";
import { ServiceComm } from "../services/service-comm.service";
import { ConfigurationHelper } from "../services/configuration-helper";
import { ServiceCacheApi } from "../services/service-cache-api.service";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    imports: [
        MatToolbarModule,
        MatIconModule,
        MatSelectModule,
        MatOptionModule,
        MatSidenavModule,
        MatListModule,
        RouterOutlet,
        RouterLink,
        TranslateModule,
        TranslatePipe,
    ],
})
export class AppComponent implements OnInit {
    public translatedTitle = "???";
    public currentUser: User;
    public version: string;
    public selectedLanguageFlag: string;

    constructor(
        private router: Router,
        private authenticationService: AuthenticationService,
        private serviceComm: ServiceComm,
        private serviceCacheApi: ServiceCacheApi,
        private translateService: TranslateService,
    ) {
        const sanitizer = inject(DomSanitizer);
        const resolver: IconResolver = (name) =>
            sanitizer.bypassSecurityTrustResourceUrl(
                `/assets/icon/${name}.svg`,
            );
        const iconRegistry = inject(MatIconRegistry);
        iconRegistry.addSvgIconResolver(resolver);

        this.authenticationService.currentUser.subscribe((user) => {
            if (user) {
                this.currentUser = user;
                this.translateService.addLangs(["en", "fr"]);
                this.translateService.use(user.language);
                this.selectedLanguageFlag = user.language;
            }
        });

        ConfigurationHelper.settings.subscribe((settings) => {
            if (settings != null) {
                this.version = settings.version;
            }
        });
    }

    ngOnInit() {}
    ngAfterViewInit() {
        this.serviceComm.componentTitle.subscribe(
            (title) => (this.translatedTitle = title),
        );
    }

    public show() {
        return this.authenticationService.currentUserValue != undefined;
    }

    public logout() {
        this.serviceCacheApi.delete(CacheApiKey.Dropzone);
        this.authenticationService.logout();
        this.router.navigate(["/login"], { skipLocationChange: true });
    }

    public switchLang(event: any) {
        this.translateService.use(event.value);
        this.currentUser.language = event.value;
        this.authenticationService.currentUserValue = this.currentUser;
        this.selectedLanguageFlag = event.value;

        this.serviceComm.forceTranslate();
    }
}
