import {Component, EventEmitter, Output} from '@angular/core';
import { WorldBankService } from '../world-bank.service';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'interactive-map',
  imports: [],
  templateUrl: './interactive-map.component.html',
  styleUrl: './interactive-map.component.css'
})
export class InteractiveMapComponent {

  @Output() countryDataUpdated = new EventEmitter<any>();

  selectedId: string = "";
  countryData: any = null;

  constructor(private http: HttpClient, private worldBankService: WorldBankService) {}

  onMouseOver(event: MouseEvent) {
    const target = event.target as SVGPathElement;
    if (target && target.id) {
      this.selectedId = target.id;
      this.fetchCountryData(this.selectedId);
    }

    console.log(`Hovering over: ${this.selectedId}`);
  }

  fetchCountryData(id: string) {
    this.worldBankService.getCountryData(id).subscribe(
    (
      data) => {
        this.countryData = data[1][0];
        this.countryDataUpdated.emit(this.countryData);
        console.log(this.countryData);
    },
      error => {
        console.error(`Error fetching country data: ${error}`);
      }
    );
  }
}
