import { useScrollToTop } from "expo-router";
import { useRef, type ReactNode } from "react";
import { Platform, ScrollView, type ScrollViewProps, StyleSheet, View } from "react-native";

import { tabLayout } from "@/lib/tab-layout";
import { useTabScreenScrollPadding } from "@/lib/tab-bar-insets";

type TabScrollViewProps = ScrollViewProps & {
  /** Rendered at the top of scroll content (scrolls with the page). */
  header?: ReactNode;
  children: ReactNode;
};

/**
 * Tab screen scroll view. Top chrome (logo / account) is pinned in TabPage;
 * the page header and body scroll together here.
 */
export function TabScrollView({
  header,
  children,
  contentContainerStyle,
  style,
  ...props
}: TabScrollViewProps) {
  const scrollRef = useRef<ScrollView>(null);
  const bottomPadding = useTabScreenScrollPadding();

  useScrollToTop(scrollRef);

  return (
    <ScrollView
      ref={scrollRef}
      style={[styles.scroll, style]}
      contentContainerStyle={[
        tabLayout.scrollContent,
        { paddingBottom: bottomPadding },
        contentContainerStyle,
      ]}
      contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "never" : undefined}
      scrollIndicatorInsets={{ bottom: bottomPadding }}
      {...props}
    >
      {header}
      <View style={tabLayout.scrollBody}>{children}</View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scroll: {
    flex: 1,
    minHeight: 0,
    backgroundColor: "transparent",
  },
});