import type { ReactNode } from "react";
import {
  ScrollView,
  View,
  type ScrollViewProps,
  type StyleProp,
  type ViewStyle,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { colors, gutter } from "@/lib/theme";

type ScreenProps = {
  children: ReactNode;
  /** Adds bottom room for the floating tab bar. */
  tabBarPadding?: boolean;
  background?: string;
  style?: StyleProp<ViewStyle>;
};

export function Screen({ children, background = colors.page, style }: ScreenProps) {
  return <View style={[{ flex: 1, backgroundColor: background }, style]}>{children}</View>;
}

type ScreenScrollProps = ScrollViewProps & {
  children: ReactNode;
  /** Extra bottom inset, e.g. for a sticky bar or the floating tab bar. */
  bottomInset?: number;
  /** Set false when the screen renders its own header with the top inset. */
  topInset?: boolean;
  gutters?: boolean;
};

export function ScreenScroll({
  children,
  bottomInset = 32,
  topInset = false,
  gutters = true,
  contentContainerStyle,
  ...rest
}: ScreenScrollProps) {
  const insets = useSafeAreaInsets();

  return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      keyboardShouldPersistTaps="handled"
      contentContainerStyle={[
        {
          paddingTop: topInset ? insets.top + 12 : 0,
          paddingBottom: insets.bottom + bottomInset,
          paddingHorizontal: gutters ? gutter : 0,
        },
        contentContainerStyle,
      ]}
      {...rest}
    >
      {children}
    </ScrollView>
  );
}

/** Bottom padding that clears the floating tab bar. */
export const TAB_BAR_INSET = 96;