import React from 'react';
import {StyleSheet} from 'react-native';
import Animated, {interpolate} from 'react-native-reanimated';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';

interface SearchResultsBackgroundProps {
  top: Animated.Value<number>;
}
const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
  top,
  children,
}) => {
  // TODO: (Leon) use reanimated v2
  const opacityBackground = 0;
  // const opacityBackground: Animated.Node<number> = interpolate(top, {
  //   inputRange: [-SCREEN_HEIGHT, 0],
  //   outputRange: [0, 1],
  // });
  // TODO: (Leon) use reanimated v2
  const opacityContent = 0;
  // const opacityContent: Animated.Node<number> = interpolate(top, {
  //   inputRange: [-SCREEN_HEIGHT / 40, 0],
  //   outputRange: [0, 1],
  // });
  return (
    <Animated.View
      style={[styles.container, {opacity: opacityBackground, top}]}>
      <Animated.View
        style={[styles.contentContainer, {opacity: opacityContent}]}>
        {children}
      </Animated.View>
    </Animated.View>
  );
};
const styles = StyleSheet.create({
  container: {
    height: SCREEN_HEIGHT,
    width: SCREEN_WIDTH,
    position: 'absolute',
    backgroundColor: 'white',
  },
  contentContainer: {
    flex: 1,
    paddingVertical: 10,
    paddingBottom: SCREEN_HEIGHT / 15,
  },
});
export default SearchResultsBackground;
