import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  WebView,
  Text,
} from 'react-native';

import Camera from 'react-native-camera';
import Nav from './Nav';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webViewWrap: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'transparent',
  },
  webView: {
    backgroundColor: 'transparent',
  },
  preview: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  developerWrap: {
    position: 'absolute',
    top: 30,
    left: 10,
    right: 0,
    bottom: 0,
  },
  developerText: {
    color: 'red',
    backgroundColor: 'transparent',
  },
});

const html = `<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>My first Three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.js"></script>
    <script>
     
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

      var renderer = new THREE.WebGLRenderer({ alpha: true });
      renderer.setClearColor( 0x000000, 0 ); // the default
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      var geometry = new THREE.BoxGeometry(1,1,1);
      var material = new THREE.MeshBasicMaterial({color:0x00ff00});
      var cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      function render() {
        requestAnimationFrame(render);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      render();

    </script>
  </body>
</html>`;





const sechtml = `<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>My first Three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.js"></script>
    <script>
     
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

      var renderer = new THREE.WebGLRenderer({ alpha: true });
      renderer.setClearColor( 0x000000, 0 ); // the default
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      var geometry = new THREE.BoxGeometry(1,1,1);
      var material = new THREE.MeshBasicMaterial({color:"rgb(255, 0, 0)"});
      var cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      function render() {
        requestAnimationFrame(render);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      render();

    </script>
  </body>
</html>`;




class ARView extends Component {
  constructor(props) {
    super(props);
    // load settings from props otherwise use defaults
    this.state = {};
  }

  componentDidMount() {
    if (!navigator.geolocation) { console.log('geoloaction not available'); }
    if (navigator.geolocation) { console.log('geoloaction available'); }
    navigator.geolocation.getCurrentPosition(
      (initialPosition) => {
        console.log('initial position is', initialPosition);
        this.setState({ initialPosition });
      },
      (error) => alert('error trying to find initial position', error.message),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );

    this.watchID = navigator.geolocation.watchPosition((lastPosition) => {
      // if we want function on position change, it should go here
      // this.state.changePosFunction(lastPosition);

      console.log('lastPosition', lastPosition);
      this.setState({ latitude: lastPosition.coords.latitude });
      this.setState({ longitude: lastPosition.coords.longitude });
    });
  }

  componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID);
  }

  render() {
    return (
      <View style={styles.container}>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}
        />
        <View style={styles.developerWrap}>
          <Text style={styles.developerText}>Latitude: {this.state.latitude}</Text>
          <Text style={styles.developerText}>Longitude: {this.state.longitude}</Text>
        </View>

        <View style={styles.webViewWrap}>
          <WebView
            style={styles.webView}
            source={{ html: html }}
          />
        </View>
        <Nav currentPage="ar" />

      </View>
    );
  }
}

module.exports = ARView;

@@ -1927,1203 +1927,8 @@
 ;%0A%0A%0A
-%0A%0A%0Aconst sechtml = %60%3C!DOCTYPE html%3E%0A%3Chtml%3E%0A  %3Chead%3E%0A    %3Cmeta charset=utf-8%3E%0A    %3Ctitle%3EMy first Three.js app%3C/title%3E%0A    %3Cstyle%3E%0A      body %7B margin: 0; %7D%0A      canvas %7B width: 100%25; height: 100%25 %7D%0A    %3C/style%3E%0A  %3C/head%3E%0A  %3Cbody%3E%0A    %3Cscript src=%22https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.js%22%3E%3C/script%3E%0A    %3Cscript%3E%0A     %0A      var scene = new THREE.Scene();%0A      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );%0A%0A      var renderer = new THREE.WebGLRenderer(%7B alpha: true %7D);%0A      renderer.setClearColor( 0x000000, 0 ); // the default%0A      renderer.setSize( window.innerWidth, window.innerHeight );%0A      document.body.appendChild( renderer.domElement );%0A%0A      var geometry = new THREE.BoxGeometry(1,1,1);%0A      var material = new THREE.MeshBasicMaterial(%7Bcolor:%22rgb(255, 0, 0)%22%7D);%0A      var cube = new THREE.Mesh(geometry, material);%0A      scene.add(cube);%0A%0A      camera.position.z = 5;%0A%0A      function render() %7B%0A        requestAnimationFrame(render);%0A        cube.rotation.x += 0.01;%0A        cube.rotation.y += 0.01;%0A        renderer.render(scene, camera);%0A      %7D%0A      render();%0A%0A    %3C/script%3E%0A  %3C/body%3E%0A%3C/html%3E%60;%0A%0A%0A%0A%0A
 clas
@@ -3741,16 +3741,17 @@
 ar%22 /%3E%0A%0A
+%0A
       %3C/

remove extra html