import { ScrollView, View, Animated, Platform } from "react-native";
import React, { useRef } from "react";

export const DynamicHeaderScrollView = (props) => {
  const {
    Max_Header_Height = 200,
    Min_Header_Height = 80,
    children,
    scrollViewProps = {},
    containerProps = {},
    shortHeader = <></>,
    longHeader = <></>,
    topStickyContent,
    styles,
  } = props;
  const scrollOffsetY = useRef(new Animated.Value(0)).current;

  const Scroll_Distance = Max_Header_Height - Min_Header_Height;

  const animatedHeaderHeight = scrollOffsetY.interpolate({
    inputRange: [Scroll_Distance, Scroll_Distance + 30],
    outputRange: [Max_Header_Height, 0],
    extrapolate: "clamp",
  });
  const animatedHeaderHeight2 = scrollOffsetY.interpolate({
    inputRange: [Scroll_Distance, Scroll_Distance + 30],
    outputRange: [Max_Header_Height, Min_Header_Height],
    extrapolate: "clamp",
  });
  const animatedHeaderVisible = scrollOffsetY.interpolate({
    inputRange: [Scroll_Distance - 30, Scroll_Distance],
    outputRange: [1, 0],
    extrapolate: "clamp",
  });
  const animatedHeaderVisible2 = scrollOffsetY.interpolate({
    inputRange: [Scroll_Distance - 30, Scroll_Distance + 30],
    outputRange: [0, 1],
    extrapolate: "clamp",
  });
  return (
    <View {...containerProps}>
      <View style={{ zIndex: 1 }}>
        <Animated.View
          style={[
            styles.header,
            {
              height: animatedHeaderHeight2,
              backgroundColor: "#0099CC",
              margin: 0,
              top: 0,
              opacity: animatedHeaderVisible2,
            },
          ]}
        >
          {shortHeader}
        </Animated.View>
        <Animated.View
          style={[
            styles.header,
            {
              height: animatedHeaderHeight,
              backgroundColor: "#0099CC",
              opacity: animatedHeaderVisible,

              top: 0,
            },
          ]}
        >
          {longHeader}
        </Animated.View>
      </View>
      <ScrollView
        {...scrollViewProps}
        style={{
          backgroundColor: "white",
          zIndex: 0,
        }}
        stickyHeaderIndices={[1]}
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
          { useNativeDriver: false }
        )}
      >
        <View
          style={{
            height: Scroll_Distance,
            flexDirection: "column",
          }}
        />
        {topStickyContent && (
          <View
            style={{
              paddingTop: Min_Header_Height,
              flexDirection: "column",
            }}
            index={1}
          >
            {topStickyContent}
          </View>
        )}
        {children}
      </ScrollView>
    </View>
  );
};