import {Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core';
import {TranslationService} from '../../services/translation.service';
import {ThemeService} from "../../services/theme.service";

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
    title: string = 'Sandkasten';
    version: string = '1.0';
    sandkasten_logo: string = 'assets/img/logo.png';
    isMenuOpen: boolean = false;
    isCheck: boolean = false;
    @ViewChild('menuRef') menuRef!: ElementRef;
    @Input() themeClass!: string;
    @Input() themeService!: ThemeService;

    // Instanciation du service pour les actions de traduction
    constructor(private translationService: TranslationService) {
    }

    // Méthode pour changer la langue
    onLanguageChange(event: any) {
        this.translationService.onLanguageChange(event);
    }

    toggleTheme() {
        this.themeService.toggleDarkTheme();
        this.themeService.isDarkTheme.subscribe(value => {
            this.isCheck = value;
        })
    }

    openCloseMenu() {
        this.isMenuOpen = !this.isMenuOpen;
    }

    @HostListener('document:click', ['$event'])
    clickout(event: any) {
        // If the menu is open and click is outside the menu, we close it
        if (this.isMenuOpen && !this.menuRef.nativeElement.contains(event.target)) {
            this.isMenuOpen = false;
        }
    }
}