class CustomSwitchNodePlugin extends SwitchNodeBasePlugin {
  // This must be set to exactly this.
  static PluginType = "SwitchNodePlugin";

  // this function is automatically called when an object is loaded with some material variations
  async _refreshUi() {
    if (!(await super._refreshUi())) return false; // check if any data is changed.
    const configuratorDiv = document.getElementById("mconfigurator");

    configuratorDiv.innerHTML = "";

    for (const variation of this.variations) {
      console.log(variation.title);
      const container = document.createElement("div");
      container.classList.add("variations");
      container.textContent = variation.title;
      configuratorDiv.appendChild(container);

      const obj = this._viewer.scene.getObjectByName(variation.name);
      if (!obj) {
        console.warn("no object found for variation, skipping", variation);
        continue;
      }
      if (obj.children.length < 1) {
        console.warn("SwitchNode does not have enough children", variation);
      }

      const cv = variation.camView;
      const camOffset = new Vector3(
        (cv.includes("right") ? 1 : 0) - (cv.includes("left") ? 1 : 0),
        (cv.includes("top") ? 1 : 0) - (cv.includes("bottom") ? 1 : 0),
        (cv.includes("front") ? 1 : 0) - (cv.includes("back") ? 1 : 0)
      );
      if (!variation.camDistance) variation.camDistance = 1;

      obj.children.map((child) => {
        // const image = snapObject(this._viewer, child, undefined, 7, camOffset.multiplyScalar(variation.camDistance * 0.5))
        
        const name = child.name || child.uuid
        // callback to change the material variations
        const onClick = () => {
          variation.selected = name
          this._viewer?.scene.setDirty({sceneUpdate: true, frameFade: true})
        };
        // Generate a UI from this data.
        console.log({
          uid: child.uuid,
          object: child,
          // image,
          onClick
        });
        const button = document.createElement("button");
        button.innerHTML = 
          // '<img src="' + image + '"/>' +
          name;
        button.onclick = onClick;
        container.append(button);
      });
    }
    return true;
  }
}

async function setupViewer() {
  // Initialize the viewer
  const viewer = new ViewerApp({
    canvas: document.getElementById("mcanvas")
  });

  // Add all the plugins at once
  await addBasePlugins(viewer);
  await viewer.addPlugin(DiamondPlugin);

  // await viewer.addPlugin(MaterialConfiguratorPlugin)
  await viewer.addPlugin(CustomSwitchNodePlugin);
  // This must be called after adding any plugin that changes the render pipeline.
  viewer.renderer.refreshPipeline();
  
  const ground = viewer.getPlugin(GroundPlugin);
  // this wont rebake the shadows whenever the model changes.
  ground.autoBakeShadows = false;

  // Load a 3d model configured in the webgi editor using MaterialConfiguratorPlugin
  await viewer.load(
    "https://storage.googleapis.com/demo-assets.pixotronics.com/pixo/gltf/engagementring-configurator.glb"
  );
  
  // manually bake the shadows once.
  ground.bakeShadows() // required only if autoBakeShadows is false
}

setupViewer();