import React from 'react';
import spec from 'mapbox-gl-style-spec/reference/latest.min.js'
import derefLayers from 'mapbox-gl-style-spec/lib/deref'

// Empty style is always used if no style could be restored or fetched
const emptyStyle = ensureStyleValidity({
  version: 8,
  sources: {},
  layers: [],
})

function generateId() {
  return Math.random().toString(36).substr(2, 9)
}

function ensureHasId(style) {
  if('id' in style) return style
  style.id = generateId()
  return style
}

function ensureHasNoRefs(style) {
  const derefedStyle = {
    ...style,
    layers: derefLayers(style.layers)
  }
  return derefedStyle
}

function ensureStyleValidity(style) {
  return ensureHasNoRefs(ensureHasId(style))
}

function indexOfLayer(layers, layerId) {
  for (let i = 0; i < layers.length; i++) {
    if(layers[i].id === layerId) {
      return i
    }
  }
  return null
}

export default {
  ensureStyleValidity,
  emptyStyle,
  indexOfLayer,
  generateId,
}

@@ -476,32 +476,337 @@
 return style%0A%7D%0A%0A
+function ensureHasNoInteractive(style) %7B%0A  const changedLayers = style.layers.map(layer =%3E %7B%0A    const changedLayer = %7B ...layer %7D%0A    delete changedLayer.interactive%0A    return changedLayer%0A  %7D)%0A%0A  const nonInteractiveStyle = %7B%0A    ...style,%0A    layers: changedLayers%0A  %7D%0A  return nonInteractiveStyle%0A%7D%0A%0A
 function ensureH
@@ -815,32 +815,32 @@
 NoRefs(style) %7B%0A
-
   const derefedS
@@ -976,16 +976,39 @@
  return 
+ensureHasNoInteractive(
 ensureHa
@@ -1034,16 +1034,17 @@
 (style))
+)
 %0A%7D%0A%0Afunc

Remove interactive from style for diffing to work