import React, { useRef } from "react";
import { SafeAreaView, Animated, View, StyleSheet, Button, PanResponder } from "react-native";
import Theme from '../theme.style.js';

export default function SidePanel(props){

  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value
        });
      },
      onPanResponderMove: Animated.event(
        [
          null,
          { dx: pan.x, dy: pan.y }
        ]
      ),
      onPanResponderRelease: () => {
        pan.flattenOffset();
      }
    })
  ).current;

  const defaultTransform = [{ translateY: pan.y.interpolate({
    inputRange: [Theme.screen.h / 4, Theme.screen.h / 2.15],
    outputRange: [Theme.screen.h / 4, Theme.screen.h / 2.15 ],
    extrapolate: 'clamp'
  }) }]

  const activeTransform = [{ translateY: pan.y.interpolate({
    inputRange: [Theme.screen.h / 4, Theme.screen.h / 2.15],
    outputRange: [Theme.screen.h / 4, Theme.screen.h / 2.15],
    extrapolate: 'clamp'
  }) }]

  return (
    <Animated.View
      style={{
        position: 'absolute',
        zIndex: 1,
        bottom: 5,
        transform: activeTransform
        }}
      {...panResponder.panHandlers}
    > 
      <View style={styles.box}>
        {props.content}
      </View>
    </Animated.View>)
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  titleText: {
    fontSize: 14,
    lineHeight: 24,
    fontWeight: "bold"
  },
  box: {
    height: 400,
    width: Theme.screen.w,
    // backgroundColor: "blue",
    borderRadius: 5
  }
});