import React from "react"
import { StyleSheet, View, TouchableHighlight, Image } from "react-native"
import {
  ViroARSceneNavigator,
  ViroARScene,
  ViroARPlane,
  ViroBox,
  ViroNode,
  ViroAmbientLight,
  ViroSpotLight,
  Viro3DObject,
  ViroSurface,
} from "react-viro"
import autobind from "autobind-decorator"
import backImage from "./images/back.png"

const styles = {
  buttons: {
    height: 80,
    width: 80,
  },
}

const shapes = {
  hardhat: {
    shape: require("./models/hardhat_obj.obj"),
    materials: [require("./models/hardhat.mtl")],
  },
  question: {
    shape: require("./models/question_obj.obj"),
    materials: [require("./models/question.mtl")],
  },
  clipboard: {
    shape: require("./models/clipboard_obj.obj"),
    materials: [require("./models/clipboard.mtl")],
  },
}

class WorkItemSceneAR extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      position: [0, 0.2, 0],
      scale: [0.2, 0.2, 0.2],
    }
  }

  render() {
    return (
      <ViroARScene>
        <ViroAmbientLight color="#ffffff" intensity={200} />
        <ViroARPlane>
          <ViroNode
            visible={true}
            position={this.state.position}
            scale={this.state.scale}
            key="hardhat">
            <ViroSpotLight
              innerAngle={5}
              outerAngle={20}
              direction={[0, -1, 0]}
              position={[0, 4, 0]}
              color="#ffffff"
              castsShadow={true}
              shadowNearZ={0.1}
              shadowFarZ={6}
              shadowOpacity={0.9}
            />
            <Viro3DObject
              position={[0, 0, 0]}
              source={shapes["hardhat"].shape}
              resources={shapes["hardhat"].materials}
              type="OBJ"
            />
            <ViroSurface
              rotation={[-90, 0, 0]}
              position={[0, -0.001, 0]}
              width={2.5}
              height={2.5}
              arShadowReceiver={true}
              ignoreEventHandling={true}
            />
          </ViroNode>
        </ViroARPlane>
      </ViroARScene>
    )
  }
}

export class ARViewer extends React.Component {
  constructor(props) {
    super(props)
  }

  @autobind
  _handlePress() {
    this.props.history.replace("/")
  }

  render() {
    return (
      <View style={{ width: "100%", height: "100%" }}>
        <ViroARSceneNavigator
          style={{ width: "100%", height: "100%" }}
          apiKey="06F37B6A-74DA-4A83-965A-7DE2209A5C46"
          initialScene={{ scene: WorkItemSceneAR }}
        />

        <View style={{ position: "absolute", left: 30, right: 0, top: 50 }}>
          <TouchableHighlight
            style={styles.buttons}
            onPress={this._handlePress}
            underlayColor={"#00000000"}>
            <Image source={backImage} />
          </TouchableHighlight>
        </View>
      </View>
    )
  }
}