import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { faUserGear } from '@fortawesome/free-solid-svg-icons';
import { MenuItem } from 'primeng/api';
import { ButtonModule } from 'primeng/button';
import { MenubarModule } from 'primeng/menubar';
import { OverlayPanelModule } from 'primeng/overlaypanel';
import { TabMenuModule } from 'primeng/tabmenu';
import { Observable } from 'rxjs';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
import { environment } from '../../../environments/environment';
import { UserService } from '../../services/user.service';
@Component({
  selector: 'header',
  standalone: true,
  imports: [CommonModule, MenubarModule, ButtonModule, OverlayPanelModule, TabMenuModule],
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss',
})
export class HeaderComponent {
  public buildVersion = environment.buildVersion;
  user$: Observable<User>;
  user: User;
  public tabItems: MenuItem[];
  public menuItems: MenuItem[];
  activeItem;
  faUserGear = faUserGear;
  constructor(public userService: UserService, private router: Router) {}

  ngOnInit() {
    this.user$ = this.userService.getUserObservable();
    this.user$.subscribe(u => {
      this.user = u;
      this.menuItems = [
        {
          label: 'User Actions',
          icon: 'fas fa-cog',
          items: [
            {
              label: 'Account',
              icon: 'pi pi-user',
              routerLink: `/account`,
              visible: this.isUserLogedIn(),
            },
            {
              label: 'Create Listing',
              icon: 'pi pi-plus-circle',
              routerLink: '/createBusinessListing',
              visible: this.isUserLogedIn(),
            },
            {
              label: 'My Listings',
              icon: 'pi pi-list',
              routerLink: '/myListings',
              visible: this.isUserLogedIn(),
            },
            {
              label: 'My Favorites',
              icon: 'pi pi-star',
              routerLink: '/myFavorites',
              visible: this.isUserLogedIn(),
            },
            {
              label: 'EMail Us',
              icon: 'fa-regular fa-envelope',
              routerLink: '/emailUs',
              visible: this.isUserLogedIn(),
            },
            {
              label: 'Logout',
              icon: 'fa-solid fa-right-from-bracket',
              routerLink: '/logout',
              visible: this.isUserLogedIn(),
            },
            {
              label: 'Login',
              icon: 'fa-solid fa-right-from-bracket',
              command: () => this.login(),
              visible: !this.isUserLogedIn(),
            },
          ],
        },
      ];
    });
    this.tabItems = [
      {
        label: 'Businesses for Sale',
        routerLink: '/businessListings',
        fragment: '',
      },
      {
        label: 'Commercial Property',
        routerLink: '/commercialPropertyListings',
        fragment: '',
      },
      {
        label: 'Professionals/Brokers Directory',
        routerLink: '/brokerListings',
        fragment: '',
      },
    ];

    this.activeItem = this.tabItems[0];
  }
  navigateWithState(dest: string, state: any) {
    this.router.navigate([dest], { state: state });
  }
  isUserLogedIn() {
    return this.userService?.isLoggedIn();
  }
  login() {
    this.userService.login(window.location.href);
  }
}