import { AbstractDialog } from '@/shared/abstractClasses/abstract-dialog';
import { Component, computed, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
import { Button } from 'primeng/button';
import { Drawer } from 'primeng/drawer';
import { Ripple } from 'primeng/ripple';
import { filter } from 'rxjs';
import { PosInfoStore } from '../../store';

@Component({
  selector: 'pos-main-menu-sidebar',
  templateUrl: './main-menu-sidebar.component.html',
  imports: [Drawer, Button, Ripple, RouterLink],
})
export class PosMainMenuSidebarComponent extends AbstractDialog {
  private readonly posInfoStore = inject(PosInfoStore);
  private readonly swUpdate = inject(SwUpdate);

  readonly posInfo = computed(() => this.posInfoStore.entity());
  appVersion = '0.0.0';
  isPwaBuild = false;

  readonly posName = computed(() => {
    if (this.posInfo()) {
      const { name, businessActivity, complex } = this.posInfo()!;
      return `${name} (${businessActivity.name} - ${complex.name})`;
    }
    return '';
  });

  ngOnInit() {
    this.isPwaBuild = this.swUpdate.isEnabled;
    if (!this.isPwaBuild) return;

    fetch('/ngsw.json')
      .then((res) => res.json())
      .then((data: { appData?: { appVersion?: string } }) => {
        this.appVersion = data?.appData?.appVersion || this.appVersion;
        console.log('appVersion:', data?.appData);
      })
      .catch((err) => {
        console.log('err', err);
      });

    this.swUpdate.versionUpdates
      .pipe(filter((event): event is VersionReadyEvent => event.type === 'VERSION_READY'))
      .subscribe((event) => {
        const appData = event.latestVersion.appData as { appVersion?: string } | undefined;
        this.appVersion = appData?.appVersion || this.appVersion;
      });

    this.swUpdate.checkForUpdate().catch(() => {});
  }
}