psp_panel/src/app/domains/pos/layouts/layout.component.ts

import { AuthService } from '@/core';
import { LayoutService } from '@/layout/service/layout.service';
import { PageLoadingComponent } from '@/shared/components/page-loading.component';
import { CommonModule } from '@angular/common';
import {
  AfterViewInit,
  Component,
  TemplateRef,
  ViewChild,
  computed,
  inject,
  signal,
} from '@angular/core';
import { RouterLinkWithHref, RouterOutlet } from '@angular/router';
import { MenuItem } from 'primeng/api';
import { Button, ButtonDirective } from 'primeng/button';
import { Card } from 'primeng/card';
import { Menu } from 'primeng/menu';
import { finalize } from 'rxjs';
import images from 'src/assets/images';
import { PosInfoStore, PosProfileStore } from '../store';
import { DeviceInfoStore } from '../store/device.store';
import { PosChooseCardsComponent } from './choose-pos.component';
import { PosMainMenuSidebarComponent } from './mainMenuSidebar/main-menu-sidebar.component';

@Component({
  selector: 'pos-layout',
  templateUrl: './layout.component.html',
  imports: [
    PageLoadingComponent,
    RouterOutlet,
    ButtonDirective,
    Card,
    PosChooseCardsComponent,
    Button,
    PosMainMenuSidebarComponent,
    Menu,
    CommonModule,
    RouterLinkWithHref,
  ],
})
export class PosLayoutComponent implements AfterViewInit {
  constructor() {}

  // private readonly nativeBridgeService = inject(NativeBridgeService);
  // private readonly toastService = inject(ToastService);

  @ViewChild('topbarStart', { static: true }) topbarStart!: TemplateRef<any>;
  @ViewChild('topbarCenter', { static: true }) topbarCenter!: TemplateRef<any>;
  @ViewChild('topbarEnd', { static: true }) topbarEnd!: TemplateRef<any>;

  private readonly posProfileStore = inject(PosProfileStore);
  private readonly posInfoStore = inject(PosInfoStore);
  private readonly deviceInfoStore = inject(DeviceInfoStore);
  private readonly authService = inject(AuthService);
  private readonly layoutService = inject(LayoutService);

  mainMenuVisible = signal(false);

  readonly posProfileLoading = computed(() => this.posProfileStore.loading());
  readonly posProfile = computed(() => this.posProfileStore.entity());
  readonly posProfileError = computed(() => this.posProfileStore.error());

  readonly posInfoLoading = computed(() => this.posInfoStore.loading());
  readonly posInfo = computed(() => this.posInfoStore.entity());
  readonly posInfoError = computed(() => this.posInfoStore.error());

  readonly loading = computed(() => this.posProfileLoading());
  readonly error = computed(() => this.posProfileError());

  readonly deviceInfo = computed(() => this.deviceInfoStore.entity());

  logout = () => {
    this.authService.logout();
  };

  profileMenuItems: MenuItem[] = [
    {
      label: 'راهنمای سامانه',
      icon: 'pi pi-question-circle',
      disabled: true,
    },
    {
      label: 'خروج',
      icon: 'pi pi-sign-out',
      command: this.logout,
    },
  ];

  placeholderLogo = images.placeholders.logo;

  now = new Date();
  private touchStartY = 0;
  private pulling = false;
  pullDistance = signal(0);
  readonly pullThreshold = 80;

  homeRouteLink = '/pos';

  async getData() {
    await this.layoutService.changeFullPageLoading(true);
    await this.deviceInfoStore.getData();
    await this.posProfileStore.getData().subscribe({
      next: () => {
        this.posInfoStore
          .getData()
          .pipe(
            finalize(() => {
              this.layoutService.changeFullPageLoading(false);
            }),
          )
          .subscribe();
      },
    });
  }

  toggleMenu() {
    this.mainMenuVisible.update((v) => !v);
  }

  onChoosePos() {
    this.getData();
  }

  ngOnInit() {
    this.layoutService.changeIsFullPage(true);
    this.getData();
  }

  ngAfterViewInit() {
    this.layoutService.setTopbarStartSlot(this.topbarStart);
    this.layoutService.setTopbarCenterSlot(this.topbarCenter);
    this.layoutService.setTopbarEndSlot(this.topbarEnd);
  }

  ngOnDestroy() {
    this.layoutService.changeIsFullPage(false);
    this.layoutService.setTopbarStartSlot(null);
    this.layoutService.setTopbarCenterSlot(null);
    this.layoutService.setTopbarEndSlot(null);
  }

  onTouchStart(event: TouchEvent) {
    if (window.scrollY > 0 || event.touches.length !== 1) return;
    this.touchStartY = event.touches[0].clientY;
    this.pulling = true;
  }

  onTouchMove(event: TouchEvent) {
    if (!this.pulling) return;
    const delta = event.touches[0].clientY - this.touchStartY;
    if (delta <= 0) {
      this.pullDistance.set(0);
      return;
    }

    const damped = Math.min(delta * 0.5, 140);
    this.pullDistance.set(damped);
    event.preventDefault();
  }

  onTouchEnd() {
    if (!this.pulling) return;
    const shouldRefresh = this.pullDistance() >= this.pullThreshold;
    this.pulling = false;
    this.pullDistance.set(0);
    if (shouldRefresh) {
      this.layoutService.changeIsFullPage(true);
      this.getData();
    }
  }
}