import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MaterialIcon } from '../../../../interfaces/material-icons.interface';

@Component({
  selector: 'app-grid-icons-selector',
  standalone: false,
  templateUrl: './grid-icons-selector.component.html',
  styleUrl: './grid-icons-selector.component.css'
})
export class GridIconsSelectorComponent implements OnInit {
  iconSelected: string;
  icons: Map<string, MaterialIcon[]>;
  categories: string[];

  constructor(
    @Inject(MAT_DIALOG_DATA) private _data: any
  ) {
    this.iconSelected = "";
    this.icons = new Map();
    this.categories = [];
  }

  ngOnInit(): void {
    for(const icon of this._data.materialIcons as MaterialIcon[]){
      for(const category of icon.categorie){
        if(!this.categories.includes(category)){
          this.categories.push(category);
        }

        let iconsByCategory: MaterialIcon[];
        if(this.icons.has(category)){
          iconsByCategory = this.icons.get(category)!;
        }else{
          iconsByCategory = [];
        }

        iconsByCategory.push(icon);
        this.icons.set(category, iconsByCategory);
      }
    }
  }

  selectIcon(icon: string, category: string){
    if(this.icons.has(category)){
      let iconCategoryArr = this.icons.get(category)!;
      let iconFilt = iconCategoryArr.filter(item => item.name == icon);
      
      if(iconFilt.length > 0){
        this.iconSelected = icon;
      }
    }
  }
}
