import { ScrollView, View, Animated, LayoutAnimation } from "react-native";
import React, { useMemo, useState } from "react";
import { useScrollHandlers } from "react-native-actions-sheet";

export const DynamicHeaderScrollView = (props) => {
  const {
    children,
    actionSheetRef = {},
    containerProps = {},
    shortHeader = <></>,
    longHeader = <></>,
    topStickyContent,
    styles,
    from,
  } = props;

  const viewHeader = useMemo(() => {
    switch (from) {
      case "AllTrainDiagramView":
      case "NearTrainDiagramView":
      case "LED2":
        return true;
      default:
        return false;
    }
  }, [from]);

  const Max_Header_Height = viewHeader ? 0 : 200;
  const Min_Header_Height = viewHeader ? 0 : 80;

  const Scroll_Distance = Max_Header_Height - Min_Header_Height;

  const scrollHandlers = actionSheetRef
    ? useScrollHandlers("scrollview-1", actionSheetRef)
    : null;

  const shotHeaderStyle = {
    on: {
      height: Min_Header_Height,
      backgroundColor: "#0099CC",
      margin: 0,
      top: 0,
      opacity: 1,
    },
    off: {
      height: Max_Header_Height,
      backgroundColor: "#0099CC",
      margin: 0,
      top: 0,
      opacity: 0,
    },
  };

  const longHeaderStyle = {
    on: {
      height: Max_Header_Height,
      backgroundColor: "#0099CC",
      margin: 0,
      top: 0,
      opacity: 1,
    },
    off: {
      height: 0,
      backgroundColor: "#0099CC",
      margin: 0,
      top: 0,
      opacity: 0,
    },
  };
  const StickyStyle = {
    on: {
      position: "absolute",
      width: "100%",
      flex: 1,
      top: Max_Header_Height,
      zIndex: 1,
    },
    off: {
      position: "absolute",
      width: "100%",
      flex: 1,
      top: Min_Header_Height,
      zIndex: 1,
    },
  };

  const [headerVisible, setHeaderVisible] = useState(false);

  const onScroll = (event) => {
    const scrollY = event.nativeEvent.contentOffset.y;
    if (Scroll_Distance < scrollY == headerVisible) return;
    LayoutAnimation.configureNext({
      duration: 100,
      update: { type: "easeOut" },
    });
    setHeaderVisible(Scroll_Distance < scrollY);
  };

  return (
    <View {...containerProps}>
      <View style={{ zIndex: 1 }}>
        <Animated.View
          style={[
            styles.header,
            headerVisible ? shotHeaderStyle.on : shotHeaderStyle.off,
          ]}
        >
          {viewHeader ? <></> : shortHeader}
        </Animated.View>
        <Animated.View
          style={[
            styles.header,
            headerVisible ? longHeaderStyle.off : longHeaderStyle.on,
          ]}
        >
          {viewHeader ? <></> : longHeader}
        </Animated.View>
        <Animated.View style={headerVisible ? StickyStyle.off : StickyStyle.on}>
          {topStickyContent}
        </Animated.View>
      </View>
      <ScrollView
        {...scrollHandlers}
        style={{ backgroundColor: "white", zIndex: 0 }}
        stickyHeaderIndices={[1]}
        scrollEventThrottle={16}
        onScroll={onScroll}
      >
        <View style={{ height: Scroll_Distance, flexDirection: "column" }} />
        {topStickyContent && (
          <View
            style={{
              paddingTop: Min_Header_Height + 40,
              flexDirection: "column",
            }}
            index={1}
          />
        )}
        {children}
      </ScrollView>
    </View>
  );
};