import {Directive, Input, Host} from '@angular/core';
import {MapComponent} from '@maplibre/ngx-maplibre-gl';

@Directive({
  selector: 'mgl-map[styleName]',
  standalone: true,
})
export class MapStyleDirective {
  constructor(@Host() readonly map: MapComponent) {}

  @Input()
  set styleName(name: string) {
    const style = `https://maps.server.uni-frankfurt.de/static/styles/${name}/style.json`;
    if (this.map.style) {
      this.map.mapInstance.setStyle(style);
    } else {
      this.map.style = style;
    }
  }
}
