export default class multiSurface extends React.Component {
  render() {
    return (
      <View>

        //1.
        // Pay attention here. This is the key of how this will work
        // You will need to find a way to pass differentiating props to surfaceModule.info()
        // to play the specific info you want. There is no need to create more surfaces/methods
        <VrButton style={styles.pointOfInterest} onClick={() => surfaceModule.info(this.props.point1, point2 or point3 etc.)}>
        //

          <Image source={asset(`info-${this.props.imagePoint}.png`)}
            style={{
              width: 100,
              height: 100,
            }}
            />
        </VrButton>
      </View>
    );
  }
};


//2.
//client.js
// Pay attention here. The info will take as arguments the props that you passed from the button click
//
  info(pointOfInterest, vide) {
    infoPanel.setAngle(
      -0.5,
      0,
      0
    );

    infoRoot = r360.renderToSurface(
      r360.createRoot('InfoPanel', { //The arguments passed from the props go here just like in TourismVR }),
      infoPanel,
    );

    videoPanel.setAngle(
      0.5,
      0,
      0
    );

    videoRoot = r360.renderToSurface(
      r360.createRoot('Video', { //The arguments passed from the props go here just like in TourismVR for the Video}),
      videoPanel,
      'video'
    );
  }


//3. Dynamic Video and InfoPanel
/ Finally with the arguments that you passed in, the video and infopanel that are generated with the click of a button
/  will have the info you need


export default class Video extends React.Component {

  //
  warehouse = VideoModule.createPlayer(// Youll need to dynamically pass in a player here);

  componentDidMount() {
    this.warehouse.play({

      ///
      source: {url: asset('./video/<dynamically show the video of choice>.mp4').uri},
      //

      muted: false,
      volume: 0.1
    });

    Environment.setScreen(
      'default', /* screen name */
       ///////
      '<dynamic video from the props/arguments given>', /* player unique id */
       ////////
      'video', /* surface name */
      0, 0, 850, 500 /* relative position on the surface */
    );
  }