import { layerGroup } from 'leaflet';
import { Sticker } from '$modules/Sticker';

export class Stickers {
  constructor({ map, lockMapClicks, triggerOnChange }) {
    this.map = map;
    this.layer = layerGroup();
    this.triggerOnChange = triggerOnChange;

    this.lockMapClicks = lockMapClicks;
    this.stickers = [];

    this.layer.addTo(this.map);
  }

  createSticker = ({ latlng, sticker, angle = 2.2, text = '', set }) => {
    const marker = new Sticker({
      latlng,
      angle,
      deleteSticker: this.deleteStickerByReference,
      map: this.map,
      lockMapClicks: this.lockMapClicks,
      sticker,
      set,
      triggerOnChange: this.triggerOnChange,
      text,
    });

    this.stickers.push(marker);

    marker.marker.addTo(this.map);

    this.triggerOnChange();
    // marker.marker.enableEdit();
  };

  deleteStickerByReference = ref => {
    const index = this.stickers.indexOf(ref);

    if (index < 0) return;

    this.map.removeLayer(ref.marker);
    this.stickers.splice(index, 1);

    this.triggerOnChange();
  };

  clearAll = () => {
    const target = [...this.stickers];
    target.map(sticker => {
      this.deleteStickerByReference(sticker);
      return true;
    });
  };

  dumpData = () => this.stickers.map(sticker => sticker.dumpData());

  startEditing = () => {
    this.stickers.map(sticker => sticker.startEditing());
  };

  stopEditing = () => {
    this.stickers.map(sticker => sticker.stopEditing());
  };
}
