/*
 * ******************************************************************
 * Copyright (c) 2025 Broadcom. All Rights Reserved.
 * Broadcom Confidential. The term "Broadcom" refers to Broadcom Inc.
 * and/or its subsidiaries.
 * ******************************************************************
 */
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Branding, CONTAINER_BRANDING } from '../environments/branding';
import { ANGULAR_APP_PRIMARY_NAVIGATION } from "@vcf/ng-hyper-plugin-framework";
import { ActiveThemeService } from "./services/active-theme.service";
import { RefreshTokenService } from './jwt/refresh-token.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
    readonly ANGULAR_APP_PRIMARY_NAVIGATION = ANGULAR_APP_PRIMARY_NAVIGATION;
    ALL_IN_ONE="aio";

    // True for light, False for dark
    themeFlag: boolean = true;
    activeTheme: "light" | "dark" = "light";
    activeThemeName: "Dark" | "Light" = "Dark";
    activeThemeIconShape: "sun" | "moon" = "moon";

    activeLang: string = "en";
    localStorageLangKey = "locale";
    supportedLangs: string[] = [
        "en",
        "fr",
        "es",
        "ja",
    ];
    private refreshJwtPeriodInterval;

    constructor(
        @Inject(CONTAINER_BRANDING) public branding: Branding,
        public title: Title,
        private activeThemeService: ActiveThemeService,
        private refreshTokenService: RefreshTokenService,
    ) {
        this.setActiveTheme();
        this.setActiveLang();
        this.refreshJwtPeriodically();
    }

    ngOnInit(): void {
        this.title.setTitle(this.branding.headerTitle);
    }

    ngOnDestroy(): void {
        clearInterval(this.refreshJwtPeriodInterval);
    }

    toogleTheme() {
        this.themeFlag = !this.themeFlag;
        this.setTheme();
    }

    langChange(lang: string) {
        this.activeLang = lang;
        localStorage.setItem(this.localStorageLangKey, this.activeLang);
        location.reload();
    }

    public trackByIndex(index: number, navItem: any): string {
        return navItem.nameKey;
    }

    private setActiveTheme() {
        const activeTheme = localStorage.getItem("theme") as "light" | "dark";
        this.themeFlag = activeTheme === "light";
        this.setTheme();
    }

    private setActiveLang() {
        const activeLang = localStorage.getItem("locale") || "en";
        this.activeLang = activeLang;
    }

    private setTheme() {
        if (this.themeFlag) {
            this.activeTheme = "light";
            this.activeThemeName = "Dark";
            this.activeThemeIconShape = "moon";
        } else {
            this.activeTheme = "dark";
            this.activeThemeName = "Light";
            this.activeThemeIconShape = "sun";
        }

        document.body.setAttribute("cds-theme", this.activeTheme);
        localStorage.setItem("theme", this.activeTheme);
        this.activeThemeService.setThemeMode(this.activeTheme);
    }

    private refreshJwtPeriodically() {
        /**
         * Fetch jwt token once to fetch cookie header
         */
        this.refreshTokenService.refresh().subscribe();

        const SECONDS_30 = 30000;
        this.refreshJwtPeriodInterval = setInterval(() => {
            if (this.refreshTokenService.isExpired()) {
                this.refreshTokenService.refresh().subscribe();
            }
        }, SECONDS_30);
    }
}
