import { CurrencyPipe } from '@angular/common';
import { Component, computed, inject } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatRippleModule } from '@angular/material/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { NavigationExtras, Router } from '@angular/router';
import { map } from 'rxjs/operators';

import { Table } from '../../core/table';
import { RegimeService } from '../../regimes/regime.service';
import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
import { LocalTimePipe } from '../../shared/local-time.pipe';
import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
import { TableService } from '../../tables/table.service';
import { BillNumberComponent } from '../bill-number/bill-number.component';

@Component({
  selector: 'app-running-tables',
  templateUrl: './running-tables.component.html',
  styleUrls: ['./running-tables.component.sass'],
  imports: [LocalTimePipe, CurrencyPipe, MatRippleModule, MatCardModule, ErrorStateComponent, SkeletonLoaderComponent],
})
export class RunningTablesComponent {
  private tableService = inject(TableService);
  private regimeService = inject(RegimeService);
  private dialog = inject(MatDialog);
  private router = inject(Router);
  private snackBar = inject(MatSnackBar);
  regimesResource = this.regimeService.list();

  listResource = this.tableService.running();

  regimes = computed(() => this.regimesResource.value() ?? []);
  list = computed(() => this.listResource.value() ?? []);

  navigateToBill(table: Table): void {
    const qp = { table: table.id };
    if (table.voucherId) {
      Object.assign(qp, { voucher: table.voucherId });
    }
    const navigationExtras: NavigationExtras = {
      queryParams: qp,
      queryParamsHandling: 'merge',
      preserveFragment: true,
    };
    this.router.navigate(['/sales', 'bill'], navigationExtras);
  }

  openBill() {
    return this.dialog
      .open(BillNumberComponent, { data: this.regimes() })
      .afterClosed()
      .pipe(
        map((x) => {
          if (x === undefined || x === false) {
            throw new Error('Invalid Bill Number');
          }
          return x;
        }),
      )
      .subscribe({
        next: (x) => this.router.navigate(['/sales', 'bill'], { queryParams: { bill: x } }),
        error: (x) => this.snackBar.open(x, 'Error'),
      });
  }
}