import { BreadcrumbService } from '@/core/services';
import { SharedSaleInvoiceSingleViewComponent } from '@/shared/components/invoices/sale-invoice-single-view.component';
import pageParamsUtils from '@/utils/page-params.utils';
import { Component, computed, effect, inject, signal } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ConsumerCustomerStore } from '../../store/customer.store';
import { ConsumerCustomerSaleInvoiceStore } from '../../store/saleInvoice.store';

@Component({
  selector: 'consumer-customer-saleInvoice',
  templateUrl: './single.component.html',
  imports: [SharedSaleInvoiceSingleViewComponent],
})
export class ConsumerCustomerSaleInvoiceComponent {
  private readonly route = inject(ActivatedRoute);
  private readonly breadcrumbService = inject(BreadcrumbService);
  private readonly customerStore = inject(ConsumerCustomerStore);
  private readonly store = inject(ConsumerCustomerSaleInvoiceStore);

  pageParams = computed(() => pageParamsUtils(this.route));
  customerId = signal<string>(this.pageParams()['customerId']);
  invoiceId = signal<string>(this.pageParams()['invoiceId']);
  editMode = signal<boolean>(false);

  readonly invoice = computed(() => this.store.entity());
  readonly loading = computed(() => this.store.loading());

  constructor() {
    effect(() => {
      if (this.invoice()?.id) {
        this.setBreadcrumb();
      }
    });
  }

  ngOnInit() {
    this.getData();
  }

  getData() {
    this.store.getData(this.customerId(), this.invoiceId());
  }

  setBreadcrumb() {
    this.breadcrumbService.setItems([
      ...this.customerStore.breadcrumbItems(),
      ...this.store.breadcrumbItems(),
    ]);
  }
}
