import {Component, Input, OnInit} from '@angular/core';
import {ImageMetadata} from '../../interfaces/interface';
import {RestService} from '../../services/rest.service';

// @ts-ignore
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  @Input()
  images: ImageMetadata[];

  selectedImage: ImageMetadata;
  latitude = 43.879078;
  longitude = -103.4615581;

  constructor(private restService: RestService) {

  }

  ngOnInit() {

  }

  selectMarker(event) {
    console.log(event, this.images);
    this.selectedImage = this.images.find(image =>
      image.latitude === event.latitude && image.longitude === event.longitude && !image.identifier.includes('_')
    );
    return this.selectedImage;
  }

  getImagesForMap() {
    return this.images.filter(im => !im.identifier.includes('_'));
  }

  loadImage(image: ImageMetadata): void {
    image.image_b64 = '';
    this.restService.getImage(image.identifier).toPromise().then(im => {
      image.image_b64 = 'data:image/jpg;base64,' + im.image_data;
    }).catch(err => {
      console.error('loadImage', image, err);
    });
  }


}
