Untitled

import {
  Component,
  ElementRef,
  Inject,
  Input,
  OnChanges,
  OnDestroy,
  SimpleChanges,
  ViewChild,
} from '@angular/core';
import { Subscription } from 'rxjs/internal/Subscription';
import { LayoutService } from '../layout.service';
import { Router } from '@angular/router';
import {
  KeycloakData,
  LayoutLanguage,
  LayoutMiniKiosk,
  OrganizationOption,
} from '@ziwig/types';
import { LocalStorageService } from '../local-storage.service';

@Component({
  selector: 'zg-layout-topbar',
  templateUrl: './layout-topbar.component.html',
  styleUrls: ['./layout-topbar.component.scss'],
})
export class LayoutTopbarComponent implements OnChanges, OnDestroy {
  private _subs: Subscription[] = [];

  private _title: string | undefined = 'Current Realm Here';

  @Input() data!: KeycloakData;

  @Input() organizationId!: string | null;

  fileUrl: any;

  private _searchDropdownOptionsGrouped!: boolean;

  private _searchDisabled: boolean | (() => boolean) | undefined;

  get searchDisabled(): boolean {
    return typeof this._searchDisabled === 'function'
      ? this._searchDisabled()
      : !!this._searchDisabled;
  }

  private _searchHidden: boolean | (() => boolean) | undefined;

  get searchHidden(): boolean {
    return typeof this._searchHidden === 'function'
      ? !this._searchHidden()
      : !this._searchHidden;
  }

  get searchDropdownOptionsGrouped(): boolean {
    return !!this._searchDropdownOptionsGrouped;
  }

  private _searchDropdownOptions: { label: string; value: string }[] = [];

  get searchDropdownOptions(): { label: string; value: string }[] {
    return [...this._searchDropdownOptions];
  }

  set title(value: string | undefined) {
    this._title = value;
  }

  get title(): string | undefined {
    return this._title;
  }

  private _applications: LayoutMiniKiosk[] = [];

  get applications(): LayoutMiniKiosk[] {
    return [...this._applications];
  }

  private _avatar: string = '../../../assets/images/avatar.png';

  set avatar(value: string) {
    this._avatar = value;
  }

  get avatar(): string {
    return this._avatar;
  }

  private _searchText: string = '';

  set searchText(value: string) {
    this._searchText = value;
  }

  get searchText(): string {
    return this._searchText;
  }

  public searchHandler: ((value: string) => void) | undefined;

  public searchDropdownClickHandler: (() => void) | undefined;

  public searchDropdownSelectHandler: ((value: string) => void) | undefined;

  private _selectedLang: LayoutLanguage | number | undefined;

  set selectedLang(value: LayoutLanguage | number | undefined) {
    this._selectedLang = value;
  }

  get selectedLang(): LayoutLanguage | undefined {
    if (typeof this._selectedLang === 'number')
      return this._langs[this._selectedLang];
    else return this._selectedLang;
  }

  public selectedLangHandler:
    | ((selectedLang?: LayoutLanguage | undefined) => void)
    | undefined;

  private _langs: LayoutLanguage[] = [];

  get langs(): LayoutLanguage[] {
    return this._langs;
  }

  private _organizationSelectorVisible!: boolean;

  public get organizationSelectorVisible(): boolean {
    return this._organizationSelectorVisible;
  }

  public set organizationSelectorVisible(value: boolean) {
    this._organizationSelectorVisible = value;
  }

  private _selectedOrganization!: OrganizationOption;

  set selectedOrganization(value: OrganizationOption) {
    this._selectedOrganization = value;
  }

  get selectedOrganization(): OrganizationOption {
    return this._selectedOrganization;
  }

  public selectedOrganizationHandler:
    | ((selectedOrganization?: OrganizationOption | undefined) => void)
    | undefined;

  private _organizations: OrganizationOption[] = [];

  get organizations(): OrganizationOption[] {
    return this._organizations;
  }

  private _profileBadgeValue: number | undefined;

  get profileBadgeValue(): number | string {
    if (this._profileBadgeValue) return this._profileBadgeValue;
    else return '';
  }

  @ViewChild('menubutton') menuButton!: ElementRef;

  constructor(
    public localStorageService: LocalStorageService,
    public layoutService: LayoutService,
    @Inject('env') private env: any,
    private route: Router
  ) {
    this.fileUrl = `${this.env.serverUrl}/api/files`;

    this._subs.push(
      this.layoutService.stateUpdate$.subscribe((state) => {
        this._profileBadgeValue =
          state?.notificationsSidebar?.config?.values?.length;
        this._langs = [...state.topbar.languageConfig.options];
        // if (state.topbar.organizationConfig)
        //   this._organizations = [...state.topbar.organizationConfig?.options];
        if (state.topbar?.avatar) this._avatar = state.topbar?.avatar;
        this._applications = state.topbar?.applications;
        this._adminUrl = state.topbar?.adminUrl;
        this._kioskUrl = state.topbar?.kioskUrl;
        this._title = state.topbar.title;
        this._selectedLang = state.topbar.languageConfig?.selected;
        this.selectedLangHandler = state.topbar.languageConfig?.onSelect;
        this._organizationSelectorVisible =
          !!state.topbar?.organizationConfig.visible;
        this.selectedOrganizationHandler =
          state.topbar.organizationConfig?.onSelect;
        this._searchDropdownOptionsGrouped =
          !!state.topbar.searchConfig?.dropdownOptionsGrouped;
        this._searchDropdownOptions =
          state.topbar.searchConfig?.dropdownOptions || [];
        this._searchDisabled = state.topbar.searchConfig?.disabled;
        this._searchHidden = state.topbar.searchConfig?.hidden;
        this.searchDropdownSelectHandler =
          state.topbar.searchConfig?.onDropdownSelect;
        this.searchDropdownClickHandler =
          state.topbar.searchConfig?.onDropdownClick;
        this.searchHandler = state.topbar.searchConfig?.onSearch;
      })
    );
  }

  private _adminUrl: string = '';

  get adminUrl(): string {
    return this._adminUrl;
  }

  private _kioskUrl: string = '';

  get kioskUrl(): string {
    return this._kioskUrl;
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['data'].currentValue) {
      const selectedOrganizationId = this.localStorageService.getItem(
        'selectedOrganizationId'
      );

      this._organizations = this.data?.allOrganizations;
      this._selectedOrganization =
        this._organizations?.find((org) => org.id === selectedOrganizationId) ||
        this._organizations?.[0];
      this.onSelectOrganization(this._selectedOrganization);
    }
  }

  onClick() {
    const url = this.route.serializeUrl(
      this.route.createUrlTree([this.adminUrl])
    );

    window.open(url, '_blank');
  }

  navigateToKiosk() {
    this.route.navigate([this.kioskUrl]);
  }

  onMenuButtonClick() {
    this.layoutService.onMenuToggle();
  }

  onConfigButtonClick() {
    this.layoutService.showConfigSidebar();
  }

  onProfileButtonClick() {
    this.layoutService.showProfileSidebar();
  }

  onNotificationsButtonClick() {
    this.layoutService.showNotificationsSidebar();
  }

  onSearchDropdownSelect(value: any) {
    this.searchDropdownSelectHandler && this.searchDropdownSelectHandler(value);
  }

  onSearchDropdownClick() {
    this.searchDropdownClickHandler && this.searchDropdownClickHandler();
  }

  onSearch(key: string) {
    if (key === 'Enter') {
      this.searchHandler && this.searchHandler(this.searchText || '');
    }
  }

  onSelectLang(value: LayoutLanguage) {
    if (this.selectedLangHandler) this.selectedLangHandler(value);
  }

  onSelectOrganization(value: OrganizationOption) {
    this.localStorageService.setItem('selectedOrganizationId', value.id);
    this.localStorageService.setItem('selectedOrganizationName', value.name);
    this.selectedOrganizationHandler && this.selectedOrganizationHandler(value);
  }

  ngOnDestroy(): void {
    for (const sub of this._subs) {
      sub.unsubscribe();
    }
  }
}