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

interface SearchResultsBackgroundProps {
  top: Animated.Value<number>;
}
const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
  top,
  children,
}) => {
  const opacityBackground: Animated.Node<number> = interpolate(top, {
    inputRange: [-SCREEN_HEIGHT, 0],
    outputRange: [0, 1],
  });
  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.ScrollView
        contentContainerStyle={styles.contentContainer}
        style={[styles.results, {opacity: opacityContent}]}>
        {children}
      </Animated.ScrollView>
    </Animated.View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: SCREEN_HEIGHT,
    width: SCREEN_WIDTH,
    padding: 20,
    position: 'absolute',
    backgroundColor: '#fff',
    zIndex: 0,
  },
  contentContainer: {
    flexGrow: 1,
    paddingBottom: SCREEN_HEIGHT / 15,
  },
  results: {
    marginTop: StatusBarHeight + 110,
  },
});
export default SearchResultsBackground;