import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'app-mapa',
  templateUrl: './mapa.component.html',
  styleUrls: ['./mapa.component.css']
})
export class MapaComponent {
  diseasesPercentages: Record<string, number> = {
    '': 0,
    'Virose': 15.6,
    'Dengue': 25.4,
    'Sarampo': 13.2,
    'Covid-19': 16.8,
    'Hepatite A': 30,
  }

  start: number = 0;

  @HostBinding('style.--percentage')
  percentage: number = 0;
  disease: string = "";
  
  private _normalize(value: string) {
    return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
  }

  sendDisease(): void {
  let percentage = this.diseasesPercentages[this.disease];

  if (!percentage && percentage !== 0) {
      const searchTerm = this._normalize(this.disease);

      const diseases = Object.keys(this.diseasesPercentages).filter((disease) => {
        return this._normalize(disease).match(new RegExp(searchTerm));
      });

      if (diseases.length !== 1) return;

      this.disease = diseases[0];

      percentage = this.diseasesPercentages[diseases[0]];
    }

    const incrementDuration = 5;
    
    const progress = setInterval(() => {
      const decimalDifference = percentage - this.start;
      const step = decimalDifference > 0 ? 0.1 : -0.1;

      if (Math.abs(decimalDifference) >= 0.1) {
        this.start += step;
        this.percentage = Math.round(this.start * 10) / 10;
      } else {
        this.percentage = percentage;
        clearInterval(progress);
      }
    }, incrementDuration);
  }
}
