import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { tesoMediaWatcherService } from '@teso/services/media-watcher';
import { CouponsType } from 'app/models/couponsModel';
import { ProductsModel } from 'app/models/productsModel';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ProductsService } from '../../Products/products.service';
import { CouponsService } from '../coupons.service';

@Component({
  selector: 'app-new-coupons',
  templateUrl: './new-coupons.component.html',
  styleUrls: ['./new-coupons.component.scss']
})
export class NewCouponsComponent implements OnInit,OnDestroy {
  products: ProductsModel[] = [];
  selectedProduct:any={};
  selectedType:any={};
  isLoading: boolean = false;
  couponTypes:CouponsType[]=[];
  fromWorth:number;
  toWorth:number;
  isScreenSmall:boolean;
  private _unsubscribeAll: Subject<any> = new Subject<any>();
  constructor(@Inject(MAT_DIALOG_DATA) public data: { product: any },
   public dialog: MatDialog, private _productService: ProductsService,
   private _couponService: CouponsService, private _tesoMediaWatcherService: tesoMediaWatcherService,) { }

  ngOnInit(): void {
    this._couponService.categories$.pipe(takeUntil(this._unsubscribeAll)).subscribe((d) => {
      this.couponTypes = d;
    });
    this._productService.data$.pipe(takeUntil(this._unsubscribeAll)).subscribe((d) => {
      this.products = d;
    });
    this._tesoMediaWatcherService.onMediaChange$
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(({ matchingAliases }) => {

        // Check if the screen is small
        this.isScreenSmall = !matchingAliases.includes('md');
      });
  }
  ngOnDestroy(): void {
    // Unsubscribe from all subscriptions
    this._unsubscribeAll.next();
    this._unsubscribeAll.complete();
  }
}