let version = '1.11.0';
let urlid = '0767c47d62db4018a3db02cde21a5ebb'
let iframeID = 'api-frame'
let api = null
let materialListByName = {}
let teapotVisible = true
let discOpacity = 1

/* ATTENTION
Several methods here come from different codepens. You can find them in 
this collection: https://codepen.io/collection/eJggqa
*/

// get the list of materials in the Sketchfab scene. Store this list in an object for easy access
function setMaterialListByName() {
  api.getMaterialList(function (err, sceneMaterials) {
    sceneMaterials.forEach(material => {
      materialListByName[material.name] = material
    })
    console.log(materialListByName)
  })      
}

// change a material property of the locally stored material
// and send the changed material to the Sketchfab scene
function setMaterialProperty(materialName, materialChannel, channelProperty, channelValue) {
  /*
    A material has a fixed structure
    Material object
    > name
    > channels
    > > channel (e.g. Opacity)
    > > > channelproperties
  */
  materialListByName[materialName].channels[materialChannel][channelProperty] = channelValue
  api.setMaterial(materialListByName[materialName], function () {})    
}

function toggleTeapot() {
  teapotVisible = !teapotVisible
  setVisibilityByNodename(api, ['Teapot001'], teapotVisible)
}

function toggleDisc() {
  if (discOpacity === 1) {
    discOpacity = 0.25
  } else {
    discOpacity = 1
  }
  setMaterialProperty("Disk", "Opacity", "enable", true) // make sure the opacity channel is enabled
  setMaterialProperty("Disk", "Opacity", "factor", discOpacity)
}

function actionSkfb() {
  var iframe = document.getElementById(iframeID);
  var client = new window.Sketchfab(version, iframe);

  var success = function(sketchfabApi) {
    api = sketchfabApi
    api.start(() => {
      api.addEventListener('viewerready', function() {
        setNodeMapByName(api)
        setMaterialListByName()
        
        // Avoid the camera movement when clicking an annotation
        api.setAnnotationCameraTransition(false, true)

        document.getElementById('teapotVisibility').addEventListener('click', function() {toggleTeapot()});
        document.getElementById('discOpacity').addEventListener('click', function() {toggleDisc()});
      });
      
      // ATTENTION: annotation 1 has the index 0. This is a bit confusing.      
      api.addEventListener('annotationSelect', function(index) {
        console.log('Selected annotation', index)
        if (index === 0) toggleTeapot()
        if (index === 1) toggleDisc()
      });
    
    });
  };

  client.init(urlid, {
    success: success,
    ui_stop: 0,
    ui_inspector: 0,
    ui_infos: 0,
    ui_controls: 0,
    ui_watermark: 0,
    annotation_tooltip_visible: 0 // don't show the annotation tooltip
  });
}

actionSkfb();