import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { AuthService } from 'src/app/auth/services/auth.service';
import { DashboardSeller } from 'src/app/models/dashboard-seller.model';
import { PagesUser } from 'src/app/models/pages-user.model';
import { OrderService } from 'src/app/services/order.service';
import { ShoppingService } from 'src/app/services/shopping.service';

@Component({
  selector: 'app-dash-sales',
  templateUrl: './dash-sales.component.html',
  styleUrls: ['./dash-sales.component.scss']
})
export class DashSalesComponent implements OnInit, OnDestroy {

  constructor(
    private orderService: OrderService,
    private authService: AuthService,
    private shoppingService: ShoppingService,
    private router: Router, ) { }

  subscriptionDash: Subscription;
  dataDashboardSeller: DashboardSeller;
  isMobileMenuOpen = false;

  pagesUser: PagesUser[];

  /* Pages */
  pageDashboardSale = true;

  // Adicione esta propriedade para armazenar a largura da tela
  screenWidth: number;

  metaMes = 'Meta do Mês';
  metaDia = 'Meta do dia';
  comissao = 'Comissão';
  clientes = 'Clientes Atendidos';
  notas = 'Notas emitidas';
  orcamentosPendentes = 'Orçamentos pendentes';

  /* Header */
  public userName: string;
  public storeName: string;

  // Controles window de orçamentos pendentes //
  public windowPreOrderWidth = 900;
  public windowPreOrderHeight = 600;
  public showPreOrder = false;

  public openClose(isOpened: boolean): void {
    this.router.navigate(['sales/menu/preorder']);
    this.isMobileMenuOpen = false;
  }

  toggleMobileMenu() {
    this.isMobileMenuOpen = !this.isMobileMenuOpen;
  }

  configPagesUser() {
    this.pageDashboardSale = this.pageEnable(1, 1);
  }

  pageEnable(processId: number, pageId: number) {
    const page = this.pagesUser.find(p => p.moduleId == 1 && p.processId == processId && p.pageId == pageId);
    if (page === undefined) {
      return false;
    } else {
      return page.access == 'S';
    }
  }

  ngOnInit(): void {
    console.log('Lendo pagina do menu');
    // Obter a largura inicial da tela ao carregar a página
    this.screenWidth = window.innerWidth;
    this.userName  = this.authService.getUserName();
    this.storeName = this.authService.getStoreName();
    const sellerId = this.authService.getSeller();
    this.subscriptionDash = this.orderService
      .getDashboardSeller(sellerId).subscribe(result => {
        this.dataDashboardSeller = result;
    });
    this.authService.getPagesUser(1)
      .pipe(
        map((modules) => {
          this.pagesUser = modules;
          this.configPagesUser();
        }),
        switchMap((modules) => this.authService.getActionsUser(1)),
        map((actions) => this.authService.actionsUser = actions))
      .subscribe();
  }

  ngOnDestroy(): void {
    if (this.subscriptionDash){
      this.subscriptionDash.unsubscribe();
    }
  }

  openNewOrder() {
    this.router.navigate(['sales/home']);
    this.isMobileMenuOpen = false;
  }

  openMenu() {
    this.router.navigate(['menu']);
    this.isMobileMenuOpen = false;
  }

  logout() {
    this.shoppingService.cancelShopping();
    this.authService.logout();
  }

  openOrders() {
    this.router.navigate(['sales/menu/order']);
    this.isMobileMenuOpen = false;
  }

  openDashTodaysale() {
    this.router.navigate(['sales/menu/dashboard']);
    this.isMobileMenuOpen = false;
  }


  openDashSeller() {
    this.router.navigate(['sales/menu/dashboardseller']);
    this.isMobileMenuOpen = false;
  }

  openProductOrder() {
    this.router.navigate(['sales/menu/product-order']);
    this.isMobileMenuOpen = false;
  }

  @HostListener('window:resize', ['$event'])
  onResize(event: any): void {
    this.screenWidth = event.target.innerWidth;
  }

}
