import { BreakpointObserver } from '@angular/cdk/layout';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NavigationEnd, Router, RouterModule } from '@angular/router';
import { faUserGear } from '@fortawesome/free-solid-svg-icons';
import { Collapse, Dropdown, initFlowbite } from 'flowbite';
import { KeycloakService } from 'keycloak-angular';
import { Observable, Subject, Subscription } from 'rxjs';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
import { emailToDirName, KeycloakUser } from '../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../environments/environment';
import { SharedService } from '../../services/shared.service';
import { UserService } from '../../services/user.service';
import { createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, map2User } from '../../utils/utils';
import { DropdownComponent } from '../dropdown/dropdown.component';
import { ModalService } from '../search-modal/modal.service';
@Component({
  selector: 'header',
  standalone: true,
  imports: [CommonModule, RouterModule, DropdownComponent, FormsModule],
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss',
})
export class HeaderComponent {
  public buildVersion = environment.buildVersion;
  user$: Observable<KeycloakUser>;
  keycloakUser: KeycloakUser;
  user: User;
  activeItem;
  faUserGear = faUserGear;
  profileUrl: string;
  env = environment;
  private filterDropdown: Dropdown | null = null;
  isMobile: boolean = false;
  private destroy$ = new Subject<void>();
  prompt: string;
  private subscription: Subscription;
  constructor(
    public keycloakService: KeycloakService,
    private router: Router,
    private userService: UserService,
    private sharedService: SharedService,
    private breakpointObserver: BreakpointObserver,
    private modalService: ModalService,
  ) {}

  async ngOnInit() {
    const token = await this.keycloakService.getToken();
    this.keycloakUser = map2User(token);
    if (this.keycloakUser) {
      this.user = await this.userService.getByMail(this.keycloakUser?.email);
      this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
    }

    // setTimeout(() => {
    //   initFlowbite();
    // });
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        initFlowbite();
      }
    });

    // this.breakpointObserver
    //   .observe([Breakpoints.Handset])
    //   .pipe(takeUntil(this.destroy$))
    //   .subscribe(result => {
    //     this.isMobile = result.matches;
    //     const targetEl = document.getElementById('filterDropdown');
    //     const triggerEl = this.isMobile ? document.getElementById('filterDropdownMobileButton') : document.getElementById('filterDropdownButton');
    //     if (targetEl && triggerEl) {
    //       this.filterDropdown = new Dropdown(targetEl, triggerEl);
    //     }
    //   });
    this.sharedService.currentProfilePhoto.subscribe(photoUrl => {
      if (photoUrl) {
        this.profileUrl = photoUrl;
      }
    });
  }

  // toggleFilterDropdown() {
  //   if (this.filterDropdown) {
  //     this.filterDropdown.toggle();
  //   }
  // }
  ngAfterViewInit() {}
  openModal() {
    if (this.isActive('/businessListings')) {
      this.modalService.showModal(createEmptyBusinessListingCriteria());
    } else if (this.isActive('/commercialPropertyListings')) {
      this.modalService.showModal(createEmptyCommercialPropertyListingCriteria());
    } else if (this.isActive('/brokerListings')) {
      this.modalService.showModal(createEmptyUserListingCriteria());
    }
  }
  navigateWithState(dest: string, state: any) {
    this.router.navigate([dest], { state: state });
  }
  login() {
    this.keycloakService.login({
      redirectUri: window.location.href,
    });
  }
  register() {
    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
  }
  isActive(route: string): boolean {
    return this.router.url === route;
  }
  closeDropdown() {
    const dropdownButton = document.getElementById('user-menu-button');
    const dropdownMenu = this.user ? document.getElementById('user-login') : document.getElementById('user-unknown');

    if (dropdownButton && dropdownMenu) {
      const dropdown = new Dropdown(dropdownMenu, dropdownButton);
      dropdown.hide();
    }
  }
  closeMobileMenu() {
    const targetElement = document.getElementById('navbar-user');
    const triggerElement = document.querySelector('[data-collapse-toggle="navbar-user"]');

    if (targetElement instanceof HTMLElement && triggerElement instanceof HTMLElement) {
      const collapse = new Collapse(targetElement, triggerElement);
      collapse.collapse();
    }
  }
  closeMenus() {
    this.closeDropdown();
    this.closeMobileMenu();
  }

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