import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CartService } from '../../services/cart.service';
import { Product } from 'src/app/models/product';
import { MatSnackBar } from '@angular/material/snack-bar'



@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.scss']
})

export class CartComponent implements OnInit {


  cartItems: Product[] = []
  totalPrice: number = 0

  firstname: string = ''
  lastname: string = ''
  email: string = ''
  address: string = ''
  postalcode: string = ''

  snackBarDuration = 7;


  

  constructor(private cartService: CartService, private router: Router, private _snackBar: MatSnackBar) { }

  ngOnInit(): void {
    this.cartItems = this.cartService.getItems()
    this.totalPrice = this.cartService.getTotalPrice()
    console.log(this.cartItems)
  }

  deleteFromCart(product: Product) {
    this.cartService.removeFromCart(product);
    this.cartItems = this.cartService.getItems()
    this.totalPrice = this.cartService.getTotalPrice();
    this.openSnackBar(product.name, product.quantity)
  }

  openSnackBar(productName: string, productQuantity: number) {
    this._snackBar.open( productName + " x" + productQuantity + " " + "removed", 'Close', {
      duration: this.snackBarDuration * 100
    })
  }

  onSubmit(): void {
    // Your submit logic here (e.g., making an API call that sends form data)
    this.cartItems = this.cartService.clearCart();
    this.router.navigate(['confirmation']);

  }


}