// Metro module 9680 (f9681).
import { memo } from "react";
import { Pressable, View, StyleSheet } from "react-native";
import { DRAG_HANDLE } from "../MediaKeyboardConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useGradientBottom } from "../../../client_themes/native/ClientThemesOverrides";
import MobileVisualRefreshExperiment from "../../../themes/experiments/MobileVisualRefreshExperiment";
import { useDerivedStateFromSharedValue } from "../../../reanimated/native/useStateFromSharedValue";
import { intl, t } from "../../../../intl/index.native";
import { ActionSheetDragHandle } from "../../../../design/components/experimental/native";
const useStyles = createStyles({
  headerHandleWrap: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "transparent",
    height: DRAG_HANDLE.slotHeight,
    alignItems: "center",
    bottom: void 0
  },
  dragHandleBar: {
    backgroundColor: DRAG_HANDLE.barColor,
    borderRadius: Module712.radii.xs,
    marginTop: DRAG_HANDLE.barMarginTop,
    height: DRAG_HANDLE.barHeight,
    width: DRAG_HANDLE.barWidth
  }
});
const r50 = memo(function MediaKeyboardBottomSheetHandle(props) {
  const { animatedIndex, onPress } = props;
  const styles = useStyles();
  const gradientBottom = useGradientBottom();
  const r21 = MobileVisualRefreshExperiment("MediaKeyboardBottomSheetHandle");
  const accessibilityLabel = useDerivedStateFromSharedValue(animatedIndex, (a0) => a0 > 0) ? intl.string(t.iTcuma) : intl.string(t.dcl9MQ);
  return r21 ? <ActionSheetDragHandle onPress={onPress} accessibilityLabel={accessibilityLabel} aria-hidden={onPress == null} /> : <Pressable accessibilityLabel={accessibilityLabel} accessibilityRole="button" aria-hidden={onPress == null} style={[styles.headerHandleWrap, gradientBottom]} onPress={onPress}>
    <View style={styles.dragHandleBar} />
  </Pressable>;
});
export default r50;