<!-- ShapeDiver Viewer -->
<script crossorigin src="https://viewer.shapediver.com/v2/2.19.2/sdv.concat.min.js"></script>
<link rel='stylesheet' type='text/css' href='https://viewer.shapediver.com/v2/2.19.2/sdv.css'>

<div id="root"></div>

class SDViewer extends React.Component {
  constructor(props) {
    super(props);
    // create a reference to the viewer container created in render
    this.containerSD = React.createRef();
    // ShapeDiver Viewer API object
    this.api = null;
    // Parameter definitions, will get set once model has been loaded and parameters are registered
    this.parameters = null;
  }
  
  async componentDidMount() {
    // container for the viewer
    // here the reference works and the container is loaded correctly
    let _container = this.containerSD.current;

    // ShapeDiver Viewer constructor settings
    // Refer to https://app.shapediver.com/api for details
    let settings = {
      container:   _container,
      showSceneMode: 1 // do not show the scene automatically
    };
    // construct an instance of the viewer
    this.api = new window.SDVApp.ParametricViewer(settings);
    
    // register a ShapeDiver CommPlugin
    await this.api.plugins.registerCommPluginAsync({
      // ticket of the model as shown on app.shapediver.com
      ticket: this.props.ticket,
      // URL of the ShapeDiver backend system used
      modelViewUrl: this.props.modelViewUrl,
      // runtime id to use for this CommPlugin (you might register several)
      runtimeId: 'CommPlugin_1',
      // the following setting tells the viewer to wait with loading of geometry
      deferGeometryLoading: true 
    });
    console.log('ShapeDiver CommPlugin successfully loaded');
    
    // get parameters of the model
    this.parameters = await this.api.parameters.get().data;
    console.log('Available model parameters', this.parameters);
    
    // optionally change parameter values before showing the scene
    //await this.api.parameters.updateAsync([
    //  {name: INSERT_NAME_OF_PARAMETER, value: INSERT_VALUE},
    //  {id: INSERT_ID_OF_PARAMETER, value: INSERT_VALUE},
    //]);

    // refresh (load geometry), because the initial parameter update might not have changed any values
    await this.api.plugins.refreshPluginAsync('CommPlugin_1');
   
    // finally show the scene
    await this.api.updateSettingAsync('scene.show', true);
  }
  
  render() {
    return (
      <div ref={this.containerSD} style={{width: '100%', height: '600px'}} />
    );
  }
}

ReactDOM.render(
  <SDViewer ticket = "20f9d15ecb236b79c4c342f2714558f571d34ae17fc3678f09a4e6742f28045119010401d66d47bd2f4c0a4a5ae92be36c560606effd0a98ec6ebdcec3975a5fd947d156338ff31e4a3c142a7eb4aa864f62d3db3938be957ab118903125b434296303731c19772d5a7fc89ae42348eba26888a80fdd-75013a6ebb275765f424fa8c2b7976a5" modelViewUrl = "eu-central-1" />,
  document.getElementById('root')
);