import { AfterViewInit, Component, OnInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewInit {
  private map: any;
   houseIcon = L.icon({
     iconUrl: '../../../../assets/images/icon.png',
     iconSize:     [38, 48],
     shadowSize:   [50, 64],
  });
   fireIcon = L.icon({
     iconUrl: '../../../../assets/images/fire.gif',
     iconSize:     [38, 48],
   })
  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    this.initMap();
  }

  private initMap(): void {
    const mapContainer = document.getElementById('map');
    if (mapContainer) {
      this.map = L.map('map', {
        center: [10.8494, 106.7537 ],
        zoom: 12
      });

      const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        minZoom: 3,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      });

      tiles.addTo(this.map);
      //add marker
      let popupContent = `<div>Vinhome quận 9</div>
                                <a href="" target="_blank">Xem chi tiết</a>`;

      let fireContent =   `<div>Tọa độ: 10.8661° N, 106.8029° E</div>
                                  <div>Thời gian cảnh báo: 23:23:00</div>
                                 <a href="" target="_blank">Xem chi tiết</a>`
      L.marker([10.8356, 106.8300], {icon: this.houseIcon})
                                 .addTo(this.map)
                                  .bindPopup(popupContent);
      L.marker([10.8661, 106.8029], {icon: this.fireIcon})
        .addTo(this.map)
        .bindPopup(fireContent);
    } else {
      console.error('Map container not found');
    }
  }
}
