import React from "react";
import { StyleSheet } from "react-native";
import {
  ViroARScene,
  ViroTrackingStateConstants,
  ViroARSceneNavigator,
  ViroTrackingReason,
  ViroARPlaneSelector,
  ViroTrackingState,
  ViroARTrackingReasonConstants,
  ViroImage,
} from "@viro-community/react-viro";

const HelloWorldSceneAR = () => {

  function onTrackingUpdated(state: ViroTrackingState, reason: ViroTrackingReason) {
    console.log("====================================");
    // Print State Label
    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
      console.log("state:", "Tracking Normal");
    } else if (state === ViroTrackingStateConstants.TRACKING_LIMITED) {
      console.log("state:", "Tracking Limited");
    }  else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      console.log("state:", "Tracking Not Available");
    }

    // Print Reason Label
    if (reason === ViroARTrackingReasonConstants.TRACKING_REASON_NONE) {
      console.log("reason:", "None");
    } else if (reason === ViroARTrackingReasonConstants.TRACKING_REASON_EXCESSIVE_MOTION) {
      console.log("reason:", "EXCESSIVE_MOTION");
    } else if (reason === ViroARTrackingReasonConstants.TRACKING_REASON_INSUFFICIENT_FEATURES) {
      console.log("reason:", "INSUFFICIENT_FEATURES");
    } 

    console.log("====================================\n\n");

    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
      // Handle tracking normal
    } else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      // Handle loss of tracking
    }
  }

  return (
    <ViroARScene 
      onTrackingUpdated={onTrackingUpdated} 
      anchorDetectionTypes="Horizontal"
      onAnchorFound={(foundAnchor) => {
        console.log('onAnchorFound')
      }}>
        <ViroARPlaneSelector 
          onClickState={() => {}} 
          minHeight={0.1} minWidth={0.1} alignment={'Horizontal'}>
          <ViroImage
            source={require('./assets/adaptive-icon.png')}
            scale={[1,1,1]}
            position={[-3, 0, -2]}
            height={1}
            width={1}
            //onClick={(...args) => {poiFunction("poi pressed");}}
            onClickState={() => {console.log("poi pressed");}}
            transformBehaviors={["billboard"]}
          />
      </ViroARPlaneSelector>
    </ViroARScene>
  );
};

export default () => {
  return (
    <ViroARSceneNavigator
      autofocus={true}
      initialScene={{
        scene: HelloWorldSceneAR,
      }}
      style={styles.f1}
    />
  );
};

var styles = StyleSheet.create({
  f1: { flex: 1 },
  helloWorldTextStyle: {
    fontFamily: "Arial",
    fontSize: 30,
    color: "#ffffff",
    textAlignVertical: "center",
    textAlign: "center",
  },
});