import React from "react";
import type { PropsWithChildren, ReactElement } from "react";
import { Platform, StyleSheet, useWindowDimensions } from "react-native";
import {
  GestureHandlerRootView,
  ScrollView,
} from "react-native-gesture-handler";
import { FullWindowOverlay } from "react-native-screens";
import { SelectPrimitive } from "../../primitives/Select";
import type { SelectPrimitiveContentProps } from "../../primitives/Select";

/**
 * iOS: draw the dropdown in a top-level window so it sits above native-stack
 * modals the app-root host can't reach. GestureHandlerRootView restores gestures
 * there so the inner ScrollView scrolls. Passthrough elsewhere.
 */
function ModalSafeOverlay({ children }: PropsWithChildren): ReactElement {
  if (Platform.OS !== "ios") {
    return <>{children}</>;
  }

  return (
    <FullWindowOverlay>
      <GestureHandlerRootView style={styles.overlayRoot}>
        {children}
      </GestureHandlerRootView>
    </FullWindowOverlay>
  );
}

export type SelectContentProps = SelectPrimitiveContentProps;

// Cap the dropdown height (rn-primitives positions it but never caps it) so long
// lists scroll; a window fraction adapts across devices.
const MAX_HEIGHT_RATIO = 0.55;

/**
 * Folds the primitive Portal / Overlay / Content / Viewport into one dropdown
 * part. Positioning lives in the primitive `Content`; props pass through.
 */
export function SelectContent({
  children,
  ...props
}: SelectContentProps): ReactElement {
  const { height } = useWindowDimensions();
  const maxHeight = Math.round(height * MAX_HEIGHT_RATIO);

  return (
    <SelectPrimitive.Portal>
      <ModalSafeOverlay>
        {/* Content nests inside Overlay so an item press beats the backdrop's
            tap-to-dismiss and selects instead of closing. */}
        <SelectPrimitive.Overlay>
          <SelectPrimitive.Content {...props}>
            <SelectPrimitive.Viewport>
              <ScrollView
                style={{ maxHeight }}
                bounces={false}
                keyboardShouldPersistTaps="handled"
              >
                {children}
              </ScrollView>
            </SelectPrimitive.Viewport>
          </SelectPrimitive.Content>
        </SelectPrimitive.Overlay>
      </ModalSafeOverlay>
    </SelectPrimitive.Portal>
  );
}

const styles = StyleSheet.create({
  overlayRoot: {
    flex: 1,
  },
});