'use strict';

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

import {
    ViroARScene,
    ViroText,
    ViroBox,
    ViroMaterials,
    Viro3DObject,
    ViroAmbientLight,
    ViroSpotLight,
    ViroAnimations,
} from 'react-viro';

export default class HelloWorldSceneAR extends Component {

    constructor() {
        super();

        // Set initial state here
        this.state = {
            text : "Initializing AR...",
            counter : 1,
        };

        // bind 'this' to functions
        this._onInitialized = this._onInitialized.bind(this);
        this._varSave = 0;
    }

    render() {
        return (
                <ViroARScene onTrackingInitialized={this._onInitialized} >
                    <ViroText text={this.state.text}
                    scale={[.2, .2, 0.2]}
                    position={[0, -.5, -2]}
                    style={styles.helloWorldTextStyle} />

                    <ViroAmbientLight color={"#aaaaaa"} />
                    <ViroSpotLight
                    innerAngle={5} outerAngle={90} direction={[0,-1,-.2]}
                    position={[0, 3, 1]} color="#ffffff" castsShadow={true} />

                    <ViroBox
                    position={[0, -.5, -1]}
                    scale={[.3, .3, .001]}
                    animation={{name: "rotate", run: true, loop: true}}
                    materials={["grid"]} />


                </ViroARScene>
                );
    }
    _onInitialized() {
        this.setState({
                      text : "RewardLine.fr"
                      });
    }
}

var styles = StyleSheet.create({
                               helloWorldTextStyle: {
                               fontFamily: 'Arial',
                               fontSize: 48,
                               color: '#ffffff',
                               textAlignVertical: 'center',
                               textAlign: 'center',
                               },
                               });

ViroMaterials.createMaterials({
                              grid: {
                              diffuseTexture: require('./res/grid_bg.png'),
                              },
                              });

ViroAnimations.registerAnimations({
                                  rotate: {
                                      properties: {
                                          rotateY: "+=90"
                                      },
                                      duration: 250, //.25 seconds
                                      },
                                  });



module.exports = HelloWorldSceneAR;