import {
  Component,
  ElementRef,
  HostListener,
  Input,
  ViewChild,
} from '@angular/core';
import { TranslationService } from '../../services/translation.service';
import { ThemeService } from '../../services/theme.service';
import { TranslateModule } from '@ngx-translate/core';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { NgClass, NgOptimizedImage } from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  standalone: true,
  imports: [
    NgClass,
    RouterLink,
    RouterLinkActive,
    ReactiveFormsModule,
    TranslateModule,
    NgOptimizedImage,
  ],
})
export class HeaderComponent {
  title: string = 'Sandkasten';
  version: string = '1.0';
  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: Event) {
    this.translationService.onLanguageChange(
      (event.target as HTMLSelectElement).value as 'fr' | 'en'
    );
  }

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

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

  @HostListener('document:click', ['$event'])
  clickout(event: MouseEvent) {
    // 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;
    }
  }
}