import React from "react";
import type { PressableProps } from "react-native";
import { Keyboard, Pressable } from "react-native";
import { useStyles } from "./SelectPressable.style";
import type { SelectInternalPickerProps } from "../../types";
import { useIsScreenReaderEnabled } from "../../../hooks";

type SelectPressableProps = Pick<SelectInternalPickerProps, "children"> &
  Pick<PressableProps, "onPress">;

/**
 * Switches between Pressable with pressed styling and a fragment when a
 * screen-reader is being used to avoid screen-readers from ignoring the press
 * on the MenuView
 */
export function SelectPressable({ children, onPress }: SelectPressableProps) {
  const isScreenReaderEnabled = useIsScreenReaderEnabled();
  const styles = useStyles();
  if (isScreenReaderEnabled) return <>{children}</>;

  return (
    <Pressable
      style={({ pressed }) => [pressed && styles.pressed]}
      onPressIn={Keyboard.dismiss}
      onPress={onPress}
    >
      {children}
    </Pressable>
  );
}