import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { ChangeDetectorRef, Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';
import { Title } from '@angular/platform-browser';
// import { PrimeNGConfig } from 'primeng/api';
import { Subject, takeUntil } from 'rxjs';
import { CommonFunctionService } from '../../../core/common/common-function.service';
import { ActiveSidebarService } from '../../../core/services/active-sidebar.service';
import { API } from '../../../core/services/api.service';
import { BreakpointsService } from '../../../core/services/breakpoints.services';

@Component({
  standalone: false,
  templateUrl: './header.component.html',
  selector: 'app-header',
})
export class HeaderComponent implements OnInit {
  @ViewChild('logoImage') logoImage: ElementRef<HTMLImageElement>;

  isMobile!: boolean;
  destroyed = new Subject<void>();
  MobileShow = true;
  MobileHide = true;
  topBarMenu = false;
  activeAside;

  constructor(
    public ChcekSidebar: ActiveSidebarService,
    // mobile resposive start
    breakpointObserver: BreakpointObserver,
    public MobileBreakpoints: BreakpointsService,
    private cd: ChangeDetectorRef,
    public commonF: CommonFunctionService,
    private ApiSer: API,
    private renderer: Renderer2,
    public titleService: Title
    // mobile resposive end
  ) {
    // mobile resposive start
    this.MobileBreakpoints.IsMobile.subscribe({
      next: (val) => {
        this.isMobile = val;
      },
    });
    breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small])
      .pipe(takeUntil(this.destroyed))
      .subscribe((result) => {
        if (
          result.breakpoints["(max-width: 599.98px)"] ||
          result.breakpoints["(min-width: 600px) and (max-width: 959.98px)"]
        ) {
          this.isMobile = true;
          this.MobileShow = true;
          this.MobileHide = false;
        } else {
          this.isMobile = false;
          this.MobileShow = false;
          this.MobileHide = true;
        }
      });
    // mobile resposive end
  }

  // topBar() {
  //   this.ChcekSidebartopBarMenu = !this.topBarMenu;
  // }
  userName;
  lastLogin;
  ngOnInit(): void {
    this.userName = sessionStorage.getItem('userName')
    this.lastLogin = sessionStorage.getItem('lastLogin');
    this.isMobile == true
      ? (this.ChcekSidebar.activeSide = '') : (this.ChcekSidebar.activeSide = 'IsActive'); this.cd.detectChanges();
    if (sessionStorage.getItem("logo")) {
      const favicon = document.getElementById('favIcon') as HTMLLinkElement;
      let res = JSON.parse(sessionStorage.getItem("logo") || '{}');
      if (res != null) if (res["logo"] != null) {
        this.orgLogo = res["logo"];
        this.commonF.logo = this.orgLogo
        sessionStorage.setItem("logo", JSON.stringify(res));
        this.titleService.setTitle('Inventory Management | ' + res.org_name)
        document.documentElement.style.setProperty('--primary-theme', res['primary_color']);
        document.documentElement.style.setProperty('--secondary-theme', res['secondary_color']);
        this.renderer.setAttribute(favicon, 'href', res['favicon'] ? res['favicon'] : './assets/images/TMC.svg');
      } else {
        this.orgLogo = "https://cdn-aos.b-cdn.net/Static/Email/TMC.svg";
        this.commonF.logo = this.orgLogo
      }
    } else {
      this.getLogo()
    }

  }
  orgLogo
  getLogo() {
    const favicon = this.renderer.selectRootElement('link[rel="icon"]', true);
    this.ApiSer.AdminGet('/ForgotPassword/GetOrgLogo').subscribe((res) => {
      if (res != null) if (res["logo"] != null) {
        this.orgLogo = res["logo"];
        this.commonF.logo = this.orgLogo
        sessionStorage.setItem("logo", JSON.stringify(res));
        this.titleService.setTitle('Inventory Management | ' + res.org_name)
        document.documentElement.style.setProperty('--primary-theme', res['primary_color']);
        document.documentElement.style.setProperty('--secondary-theme', res['secondary_color']);
        this.renderer.setAttribute(favicon, 'href', res['favicon'] ? res['favicon'] : './assets/images/TMC.svg');
      } else {
        this.orgLogo = "https://cdn-aos.b-cdn.net/Static/Email/TMC.svg";
        this.commonF.logo = this.orgLogo
      }
    })
  }
  asideBar(ele) {
    this.activeAside = ele;
  }
  topBar() {
    this.topBarMenu = !this.topBarMenu;
  }
  headerHeight; // Default height
  isHeightSet: boolean = false; // Flag to check if actual height is set
  adjustHeaderSize() {
    requestAnimationFrame(() => {
        this.headerHeight = this.commonF.getHeaderSize(this.logoImage);
        if (this.headerHeight > 0) { // Check if the height is valid
            this.isHeightSet = true;
        }
        this.cd.detectChanges(); // Trigger change detection
    });
}
}