require(["esri/WebMap", "esri/views/MapView", "esri/widgets/Bookmarks", "esri/Viewpoint"], function(
  WebMap,
  MapView,
  Bookmarks,
  Viewpoint
) {
  
  const BOOKMARK_KEY = "arcgis-local-bookmarks";
  
  let existingData = [];
  const existingBookmarks = localStorage.getItem(BOOKMARK_KEY) || null;
  if (existingBookmarks) {
    existingData = JSON.parse(existingBookmarks);
    for (let elem of existingData) {
      delete elem.extent; // 3x backwards compatability
      elem.viewpoint = Viewpoint.fromJSON(elem.viewpoint);
    }
  }

  const map = new WebMap({
    basemap: "streets",
    bookmarks: existingData
  });
  const view = new MapView({
    container: "viewDiv",
    map: map
  });
  
  const bookmarks = new Bookmarks({ view });
  
  view.ui.add(bookmarks, "top-right");

  const button = document.createElement("div");
  button.classList.add("esri-component", "add-button", "esri-widget-button", "esri-widget", "esri-interactive");
  const span = document.createElement("span");
  span.classList.add("esri-icon");
  span.innerHTML = '<svg class="esri-widget__content-icon--empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M26 30.435L16.5 24.1 7 30.435V1h19zm-9.5-7.536l8.5 5.666V2H8v26.565z"></path></svg>';
  button.appendChild(span);

  view.ui.add(button, "top-left");
  
  button.addEventListener("click", () => {
    const bookmark = {
      viewpoint: view.viewpoint.clone(),
      name: `Bookmark: ${bookmarks.bookmarks.length + 1}`
    };
    bookmarks.bookmarks.add(bookmark);
    
    const rawBookmarks = bookmarks.bookmarks.map((bm) => {
      let obj = {
        name: bm.name,
        viewpoint: bm.viewpoint.toJSON()
      }
      obj.extent = view.extent.toJSON();
      return obj;
    });
    
    localStorage.setItem(BOOKMARK_KEY, JSON.stringify(rawBookmarks));
  });
});