import { Component } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-producto',
  templateUrl: './producto.component.html',
  styleUrl: './producto.component.css'
})
export class ProductoComponent {
  public option: string | null = "";
  public typeLine: any;
  constructor(private route: ActivatedRoute, 
    private _matIconRegistry: MatIconRegistry, 
    private _domSanitizer: DomSanitizer){
      this._matIconRegistry.addSvgIcon(
        'catalogo',
        this._domSanitizer.bypassSecurityTrustResourceUrl(`../../assets/img/1atc.svg`)
      );
      this._matIconRegistry.addSvgIcon(
        'info',
        this._domSanitizer.bypassSecurityTrustResourceUrl(`../../assets/img/2atc.svg`)
      );
    }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.option = params.get('producto');
      console.log(this.option)
      this.cargarDatos(params.get('tipo'));
    });
  }

  cargarDatos(tipo: any) {
    if (tipo === 'habitat') {
      this.typeLine = 'Línea Hábitat';
      // this.products = [...]; // Datos de línea hábitat
    } else if (tipo === 'comercial') {
      this.typeLine = 'Línea Comercial';
      // this.products = [...]; // Datos de línea comercial
    } else if (tipo === 'industrial') {
      this.typeLine = 'Línea Industrial';
      // this.products = [...]; // Datos de línea comercial
    } else if (tipo === 'aplicacion') {
      this.typeLine = 'Por Aplicación';
      // this.products = [...]; // Datos de línea comercial
    }
    
  }
}
