import {
  View,
  Animated,
  LayoutAnimation,
  ViewStyle,
} from "react-native";
import React, {
  useEffect,
  useMemo,
  useState,
  useLayoutEffect,
  ReactNode,
  MutableRefObject,
} from "react";
import { ScrollView } from "react-native-actions-sheet";
import { AS } from "../storageControl";
import { STORAGE_KEYS } from "@/constants";
import { useThemeColors } from "@/lib/theme";

type HeaderSize = "small" | "big" | "default";

type DynamicHeaderScrollViewProps = {
  children: ReactNode;
  containerProps?: Record<string, unknown>;
  shortHeader?: ReactNode;
  longHeader?: ReactNode;
  topStickyContent?: ReactNode;
  styles?: { header: ViewStyle };
  from?: string;
  scrollRef?: MutableRefObject<any>;
};

export const DynamicHeaderScrollView: React.FC<DynamicHeaderScrollViewProps> = (
  props
) => {
  const {
    children,
    containerProps = {},
    shortHeader = <></>,
    longHeader = <></>,
    topStickyContent,
    styles,
    from,
    scrollRef,
  } = props;
  const { fixed } = useThemeColors();
  const [headerSize, setHeaderSize] = useState("default");
  useLayoutEffect(() => {
    AS.getItem(STORAGE_KEYS.HEADER_SIZE)
      .then((res) => {
        if (res) setHeaderSize(res);
      })
      .catch((e) => {
        AS.setItem(STORAGE_KEYS.HEADER_SIZE, "default");
      });
  }, []);
  useEffect(() => {
    switch (headerSize) {
      case "small":
        setHeaderVisible(true);
        return;
      case "big":
      case "default":
      default:
        setHeaderVisible(false);
        break;
    }
  }, [headerSize]);
  const viewHeader = useMemo(() => {
    switch (from) {
      case "AllTrainIDList":
      case "NearTrainDiagramView":
      case "LED2":
        return true;
      default:
        return false;
    }
  }, [from]);

  const Max_Header_Height = headerSize == "small" ? 0 : viewHeader ? 0 : 200;
  const Min_Header_Height = viewHeader ? 0 : 80;

  const Scroll_Distance = Max_Header_Height - Min_Header_Height;

  const shotHeaderStyle = {
    on: {
      height: Min_Header_Height,
      backgroundColor: fixed.primary,
      margin: 0,
      top: 0,
      opacity: 1,
    },
    off: {
      height: Max_Header_Height,
      backgroundColor: fixed.primary,
      margin: 0,
      top: 0,
      opacity: 0,
    },
  };

  const longHeaderStyle = {
    on: {
      height: Max_Header_Height,
      backgroundColor: fixed.primary,
      margin: 0,
      top: 0,
      opacity: 1,
    },
    off: {
      height: 0,
      backgroundColor: fixed.primary,
      margin: 0,
      top: 0,
      opacity: 0,
    },
  };
  const StickyStyle: Record<string, ViewStyle> = {
    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) => {
    switch (headerSize) {
      case "big":
        setHeaderVisible(false);
        return;
      case "small":
        setHeaderVisible(true);
        return;
      case "default":
      default:
        const scrollY = event.nativeEvent.contentOffset.y;
        if (Scroll_Distance < scrollY == headerVisible) return;
        LayoutAnimation.configureNext({
          duration: 100,
          update: { type: "easeOut" },
        });
        setHeaderVisible(Scroll_Distance < scrollY);
        break;
    }
  };

  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
        ref={scrollRef}
        nestedScrollEnabled
        bounces={false}
        style={{ zIndex: 0 }}
        stickyHeaderIndices={[1]}
        scrollEventThrottle={1}
        onScroll={onScroll}
      >
        <View style={{ height: Scroll_Distance, flexDirection: "column" }} />
        {topStickyContent && (
          <View
            style={{
              paddingTop: Min_Header_Height + 40,
              flexDirection: "column",
            }}
            //index={1}
          />
        )}
        {children}
      </ScrollView>
    </View>
  );
};
