import { CommonModule } from "@angular/common";
import { Component, ElementRef, HostListener, ViewChild } from "@angular/core";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { faPowerOff, faVolumeHigh } from "@fortawesome/free-solid-svg-icons";
import { TranslationPipe } from '../../pipes/translation.pipe';
import { PanelSevice } from "../../services/panel.service";
import { TranslateService } from "../../services/translate.service";

@Component({
  standalone: true,
  selector: "app-panel",
  imports: [CommonModule, FontAwesomeModule, TranslationPipe],
  templateUrl: "./panel.component.html",
  styleUrls: ["./panel.component.less"],
})
export class PanelComponent {
  source_code_btn_title = "SOURCE_CODE_TITLE"

  public time = "";
  faGithub = faGithub;
  faVolume = faVolumeHigh;
  faPower = faPowerOff;
  showLangModalBool = false;
  @ViewChild("lang_modal") langModal: ElementRef<HTMLDivElement> | null = null;
  @ViewChild("lang_btn") langBtn: ElementRef<HTMLSpanElement> | null = null;

  constructor(private panelService: PanelSevice, private translateService: TranslateService) {
    this.time = this.getTime();
    setInterval(() => {
      this.time = this.getTime();
    }, 1000);
  }

  private getTime() {
    const time = this.panelService.getTime();
    return time.toLocaleDateString(this.translateService.translate("TIME_SCHEMA"), {
      month: "short",
      day: "numeric",
      hour: "numeric",
      minute: "numeric",
    });
  }

  goToSource() {
    window.open("https://git.nwaifu.su/neuro_llc/NwaifuWeb", "_blank");
  }

  @HostListener("window:resize")
  private moveLangModal() {
    if (!this.langModal || !this.langBtn) {
      return;
    }

    const x = this.langBtn.nativeElement.getBoundingClientRect().x;
    this.langModal.nativeElement.style.left = `calc(${x}px - 3.5rem)`;
  }

  @HostListener("window:click", ["$event"])
  private closeLangModal(event: MouseEvent) {
    if (
      this.langModal &&
      this.langBtn &&
      !this.langModal.nativeElement.contains(event.target as Node) &&
      !this.langBtn.nativeElement.contains(event.target as Node)
    ) {
      this.langModal.nativeElement.classList.remove("active");
    }
  }

  toggleModal() {
    if (this.langModal) {
      this.langModal.nativeElement.classList.toggle("active");
      if (this.langModal.nativeElement.classList.contains("active")) {
        this.moveLangModal();
      }
    }
  }

  useLang(lang: string) {
    this.langModal && this.langModal.nativeElement.classList.remove("active");
    this.translateService.use(lang);
  }

  getLang() {
    return this.translateService.lang;
  }
}