import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../../material.module';
import { Api } from '../../services/api';
import { Item } from '../../models/item';
import { IconService } from '../../services/icon.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, MaterialModule],
  templateUrl: './home.html',
  styleUrls: ['./home.scss']
})
export class HomeComponent implements OnInit {
  items$!: Observable<Item[]>;
  imgErrorMap = new Map<number, boolean>();

  constructor(
    private apiService: Api,
    private iconService: IconService
  ) {}

  ngOnInit(): void {
    this.items$ = this.apiService.getItems();
  }

  onImgError(itemId: number) {
    this.imgErrorMap.set(itemId, true);
  }
  
  isMaterialIcon(iconUrl: string): boolean {
    return this.iconService.isValidIcon(iconUrl);
  }
}