import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View,
  VideoPano,
  MediaPlayerState,
  VideoControl,
  Animated,
  Model,
  VrButton,
  AmbientLight,
  PointLight
} from 'react-vr';

const AnimatedModel = Animated.createAnimatedComponent(Model);
import { Easing } from 'react-native';

export default class WelcomeToVR extends React.Component {
  constructor(){
    super()
    this.state = {
      rotation: new Animated.Value(0),
      slideValue: new Animated.Value(1.5),
      opacityValue: new Animated.Value(0),
      fadeSlide: new Animated.Value(0)
    }
  }

  rotate = () => {
    this.state.rotation.setValue(0);
    Animated.timing(
      this.state.rotation,
      {
        toValue: 360,
        duration: 10000,
        // easing: Easing.linear
      }
    ).start(this.rotate);
  }


  componentDidMount() {
    Animated.timing(
     this.state.slideValue,
     {
       toValue: 0,
       duration: 1000,
       delay: 1000,
       easing: Easing.ease
     }
   ).start();


   Animated.timing(
     this.state.opacityValue,
     {
       toValue: 1,
       duration: 1000,
       delay: 1000,
       easing: Easing.ease
     }
   ).start();

   Animated.timing(
     this.state.fadeSlide,
     {
       toValue: 1,
       duration: 1000,
       delay: 1000,
       easing: Easing.ease
     }
   ).start();
  }


  render() {
    return (
      <View>

        <VideoPano source={asset('5.mp4')}
          loop={true}
          muted={true}
          style={{
            width: 10
          }}
        />

        <View>
          <VrButton
            onClickSound={{
              mp3: asset('click.mp3'),
            }}
          >
          <Text
            style={{
              backgroundColor: '#777879',
              fontSize: 0.8,
              layoutOrigin: [0.5, 0.5],
              paddingLeft: 0.2,
              paddingRight: 0.2,
              textAlign: 'center',
              textAlignVertical: 'center',
              transform: [{translate: [0, 0, -3]}],
            }}>
            hello
          </Text>
          </VrButton>
        </View>

        <View>
          <Animated.Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.5,
            opacity: this.state.fadeSlide,
            layoutOrigin: [0.5, 0.5],
            fontWeight: '400',
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]},
              {translateY: this.state.fadeSlide}
            ]
          }}>
            tes fade text
          </Animated.Text>

        </View>






      </View>
    );
  }
};

AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);