import { CommonModule } from "@angular/common";
import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
import { Subject, filter, takeUntil } from "rxjs";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.less"],
  standalone: true,
  imports: [CommonModule],
})
export class HeaderComponent implements AfterViewInit, OnDestroy {
  @ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
  menuOpened = false;
  private destroy$ = new Subject<void>();
  constructor(
    private router: Router,
    private route: ActivatedRoute,
  ) {
    this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .pipe(takeUntil(this.destroy$))
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      .subscribe((val: any) => {
        if (val.url.startsWith("/detail") || val.url.startsWith("/reader")) {
          this.menuOpened = false;
        }
      });
  }
  changeMenu() {
    this.menuOpened = !this.menuOpened;
  }

  get menuBtnClass(): string {
    return `lni ${this.menuOpened ? "lni-close" : "lni-menu"} text-white`;
  }

  get searchBarClass(): string {
    return `search-bar bg-slate-300 md:w-[50%] w-full md:m-0 ms-2 me-2 md:h-6 h-10 md:flex justify-start flex-row items-center rounded-md ${this.menuOpened ? "flex" : "hidden"}`;
  }

  search() {
    if (this.searchInput) {
      const text = this.searchInput.nativeElement.value;
      this.router.navigateByUrl(`/?search=${text}`);
    }
  }

  ngAfterViewInit(): void {
    this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
      const search = params["search"];
      if (search && this.searchInput) {
        this.searchInput.nativeElement.value = search;
      }
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}