import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Animated,
  PanResponder,
  ScrollView,
  Image
} from 'react-native';
import C from 'rn-class';
import { Slider, Icon} from 'react-native-elements';


const Player = props => {
  const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get(
    'window'
  );
  console.log(SCREEN_HEIGHT, SCREEN_WIDTH);

  const [isScrollEnabled, setScrollEnabled] = useState(false);
  let animation = new Animated.ValueXY({x: 0, y: 0})
  let panResponder = PanResponder.create({
    onMoveShouldSetPanResponder: ()=> true,
    onPanResponderGrant: (evt, getstureState) => {
      animation.extractOffset()
    },
    onPanResponderMove: (evt, getstureState) => {
      animation.setValue({x:0, y: getstureState.dy})
    },
    onPanResponderRelease: (evt, getstureState) => {
      console.log(evt.nativeEvent)
      if(getstureState.moveY > SCREEN_HEIGHT - 60 ) {
        Animated.spring(animation.y, {
          toValue: 0,
          tension: 1
        }).start()
      }
      else if(getstureState.moveY < 60) {
        Animated.spring(animation.y, {
          toValue: 0,
          tension: 1
        }).start()
      }
      else if(getstureState.dy < 0) {
        Animated.spring(animation.y, {
          toValue: -SCREEN_HEIGHT + 60,
          tension: 1
        }).start()
      }
      else if(getstureState.dy>0) {
        Animated.spring(animation.y, {
          toValue: SCREEN_HEIGHT - 60,
          tension: 1
        }).start()
      }
    }
  })



  const animatedHeight = {
    transform: animation.getTranslateTransform()
  }

  const animatedImageHeight = animation.y.interpolate({
    inputRange: [0, SCREEN_HEIGHT - 60],
    outputRange: [200, 32],
    extrapolate: 'clamp'
  })

  const animatedTitleOpacity =  animation.y.interpolate({
    inputRange: [0, SCREEN_HEIGHT - 500, SCREEN_HEIGHT - 60],
    outputRange: [0, 0, 1],
    extrapolate: 'clamp'
  })

  const animatedImageMarginLeft = animation.y.interpolate({
    inputRange: [0, SCREEN_HEIGHT - 60],
    outputRange: [SCREEN_WIDTH/2-80, 0],
    extrapolate: 'clamp'
  })

  const animatedImageFlex = animation.y.interpolate({
    inputRange: [0, SCREEN_HEIGHT - 60],
    outputRange: [4, 1],
    extrapolate: 'clamp'
  })

  const animatedHeaderHeight = animation.y.interpolate({
    inputRange: [0, SCREEN_HEIGHT - 60],
    outputRange: [SCREEN_HEIGHT /2 + 100, 60],
    extrapolate: 'clamp'
  })

  const animatedBigPlayContentHeight = animation.y.interpolate({
    inputRange: [0, SCREEN_HEIGHT - 60],
    outputRange: [SCREEN_HEIGHT /2, 60],
    extrapolate: 'clamp'
  }) 

  const animatedBigPlayContentOpacity = animation.y.interpolate({
    inputRange: [0, SCREEN_HEIGHT - 500, SCREEN_HEIGHT - 60],
    outputRange: [1, 0, 0],
    extrapolate: 'clamp'
  })  

  const animatedPlayerBottom = animation.y.interpolate({
    inputRange: [0, SCREEN_HEIGHT - 500],
    outputRange: [0, 60],
    extrapolate: 'clamp'
  })
  console.log(props)
  
  
  return (
      // <Animated.View style={s.container}>
        <Animated.View 
        {...panResponder.panHandlers}
        style={[animatedHeight,s.playerContainer,{height:SCREEN_HEIGHT}]}>

          <Animated.View 
          style={{height:animatedHeaderHeight, alignItems:'center', borderTopWidth:1, flexDirection:'row', borderTopColor: '#eee'}}>           
            
            <Animated.View style={{ flex:animatedImageFlex, height: animatedImageHeight, widht: animatedImageHeight, marginLeft: animatedImageMarginLeft}}>
              <Image resizeMode='contain' style={{width:null, height:null, flex:4}} source={props.Pages.img} />
              <Animated.Text style={{opacity:animatedBigPlayContentOpacity, flex:1}}>{props.Pages.subtitle}</Animated.Text>
            </Animated.View>
            <View style={{flex:3}}>
              <Animated.Text numberOfLines={1} style={{ opacity:animatedTitleOpacity}}>
                {props.Pages.subtitle}  
              </Animated.Text>
            </View>
            <Animated.View style={{opacity:animatedTitleOpacity, flex:2, flexDirection: 'row', justifyContent: 'space-around'}}>
              <Icon type='ionicon' name='md-pause' />
              <Icon type='ionicon' name='md-play' />
              <Icon type="ionicon" name="md-close"  onPress={props.closePlayer}/>  
            </Animated.View>

          </Animated.View>

          <Animated.View style={{height:animatedBigPlayContentHeight, opacity:animatedBigPlayContentOpacity}}>
            
            <View style={{flex:1, alignItems:'center', justifyContent:'flex-end'}}>
              <Text style={{fontSize:18, fontWeight: 'bold'}}>{props.Pages.title}</Text>
              <Text style={{marginTop:10}}>{props.Pages.contens}</Text>
            </View>
            
            <View style={{flex:1, flexDirection:'row', alignItems: 'center', justifyContent: 'space-around'}}>
              <Icon type='ionicon' name='md-rewind'></Icon>
              <Icon type='ionicon' name='md-pause'></Icon>
              <Icon type='ionicon' name='md-fastforward'></Icon>
            </View>

            <View style={{flex:1, width: SCREEN_WIDTH, alignItems: 'center'}}>
              <Slider style={{width:300}} />
            </View>

          </Animated.View>

        </Animated.View>
      // </Animated.View>
    );
}

const s = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFill,
    backgroundColor: 'skyblue',
    zIndex: 10
  },
  playerContainer: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 20,
    backgroundColor: 'orange',
    

  },
  playerContentContainer: {
    height: 80,
    borderTopWidth: 1,
    borderTopColor: '#ebe5e5',
    flexDirection: 'row',
    alignItems: 'center',
    
  },
  example: {
    alignContent: 'center',
    justifyContent: 'center'
  }

});

export default Player;
