// creates pins
import { Feature } from "ol";
import { Icon, Style } from "ol/style";
import Point from "ol/geom/Point.js";

const makePin = (lon, lat, storeName, cheapest, flozPrice) => {
  // define pin graphics (since this is all inline)
  const pinSVG = `<svg width="32px" height="32px" viewBox="-0.12 -0.12 12.24 12.24" enable-background="new 0 0 12 12" id="Слой_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000" stroke-width="0.12000000000000002"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M6,0C3.2385864,0,1,2.2385864,1,5s2.5,5,5,7c2.5-2,5-4.2385864,5-7S8.7614136,0,6,0z M6,7 C4.8954468,7,4,6.1045532,4,5s0.8954468-2,2-2s2,0.8954468,2,2S7.1045532,7,6,7z" fill="#ed333b"></path></g></svg>`;
  const pinSVGBlob = new Blob([pinSVG], {
    type: "image/svg+xml",
  });
  const pinImageURL = URL.createObjectURL(pinSVGBlob);

  // define style for all pins
  const pinStyle = new Style({
    image: new Icon({
      src: pinImageURL,
      anchor: [0.5, 1],
    }),
  });

  // create pin as feature
  const pin = new Feature({
    geometry: new Point([lon, lat]),
    store: storeName,
    cheapestItem: cheapest,
    pricePerOz: flozPrice,
  });

  // set style for pin
  pin.setStyle(pinStyle);

  return pin;
};

export default makePin;