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

@Component({
  selector: 'app-product-item-details',
  templateUrl: './product-item-details.component.html',
  styleUrls: ['./product-item-details.component.scss']
})
export class ProductItemDetailsComponent implements OnInit {
  disableSelect = new FormControl(false);
  product: Product = 
    {
      id: 1,
      name: "",
      price: 0,
      url: "",
      description: "",
      quantity: 0
    }
  productId: number = 0
  quantity: string = '1'

  snackBarDuration = 7;

  constructor(
    private httpService: HttpService, 
    private route: ActivatedRoute, 
    private cartService: CartService,
    private _snackBar: MatSnackBar
    ) { }

  ngOnInit(): void {
    this.productId = parseInt(this.route.snapshot.paramMap.get('id') as string, 10);

    this.httpService.getProducts().subscribe((res: Product[]) => {
      this.product = res.filter(item => item.id === this.productId)[0];
    })

  }

  addToCart(product: Product) {
    this.product.quantity = parseInt(this.quantity)
    this.cartService.addToCart(product);
    this.openSnackBar(product.name, product.quantity)
  }

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

}