import { CommonModule } from "@angular/common";
import { Component, ElementRef, EventEmitter, Output, ViewChild } from "@angular/core";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.less"],
  standalone: true,
  imports: [CommonModule],
})
export class HeaderComponent {
  @Output() searchEvent: EventEmitter<string> = new EventEmitter();
  @ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
  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 max-h-6 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.searchEvent.emit(text);
    }
  }
}