import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BadgeAlign, BadgePosition } from '@progress/kendo-angular-indicators';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { AuthService } from 'src/app/auth/services/auth.service';
import { Store } from '@ngrx/store';
import { SaleState } from 'src/app/sales/store/models/sale-state.model';
import { ShoppingItem } from 'src/app/sales/store/models/shopping-item';
import { ShoppingService } from 'src/app/services/shopping.service';

@Component({
  selector: 'app-header-sales',
  templateUrl: './header-sales.component.html',
  styleUrls: ['./header-sales.component.scss']
})
export class HeaderSalesComponent implements OnInit {
  public imageLogoBase64: SafeUrl;

  /* Badge Cart */
  public position: BadgePosition = 'inside';
  public get align(): BadgeAlign {
    return { vertical: 'top', horizontal: 'end' };
  }
  public themeBadge = 'warning';

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

  /* Shopping */
  shoppingItems$: Observable<ShoppingItem[]>;

  constructor(
    private readonly authService: AuthService,
    private readonly shoppingService: ShoppingService,
    private readonly store: Store<SaleState>,
    private readonly sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    this.userName = this.authService.getUserName();
    this.storeName = this.authService.getStoreName();
    this.shoppingItems$ = this.store.select((store) => store.shopping.list);

    // Configuração do logo em Base64
    const rawImageLogoBase64 = `data:img/png;base64,[encoded data, 7756 characters]`;
    this.imageLogoBase64 = this.sanitizer.bypassSecurityTrustUrl(rawImageLogoBase64);
  }

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