// Metro module 9681 (f9682).
import * as Module19 from "react";
import { useMemo, useCallback } from "react";
import { StyleSheet, View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { isIOS } from "../../../../utils/PlatformUtils";
import { useGradientValue, GradientPercentage } from "../../../client_themes/native/ClientThemesUtils";
import Module689 from "../../../../_bundle/Module689";
import { useToken } from "../../../../design/tokens/native/useToken";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { useMobileVisualRefreshConfig } from "../../../themes/experiments/MobileVisualRefreshExperiment";
import Module4611 from "../../../../_bundle/Module4611";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import { Text } from "../../../../design/components/Text/native/Text";
const useStyles = createStyles((marginBottom, a1, a2, a3) => {
  const wrap = {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
    top: void 0
  };
  if (isIOS()) {
    marginBottom = Module712.space.PX_24;
  }
  return {
    wrap,
    container: {
      paddingVertical: Module712.space.PX_8,
      marginHorizontal: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_MARGIN_HORIZONTAL,
      marginBottom,
      borderRadius: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_BORDER_RADIUS,
      backgroundColor: a2 == null ? a1 : a2,
      paddingHorizontal: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_PADDING_HORIZONTAL,
      borderWidth: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_BORDER_WIDTH,
      ...Module712.shadows.SHADOW_HIGH,
      ...a3 ? {
        borderColor: Module712.colors.BORDER_MUTED
      } : {
        borderTopColor: Module712.colors.BORDER_MUTED
      }
    },
    buttonsContainer: {
      gap: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_GAP,
      alignItems: "stretch",
      flexDirection: "row",
      marginHorizontal: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_BUTTONS_MARGIN_HORIZONTAL
    },
    button: {
      flexBasis: 64,
      minHeight: 48,
      flexGrow: 1,
      justifyContent: "center",
      flexDirection: "column",
      alignItems: "center",
      padding: Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_PADDING,
      borderRadius: Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_BORDER_RADIUS,
      gap: 4
    },
    gradient: {
      ...StyleSheet.absoluteFillObject,
      color: Module712.colors.BACKGROUND_BASE_LOW
    }
  };
});
const r30 = Module19.memo(function MediaKeyboardBottomSheetActions(props) {
  const { onHeightChange, overflowButtons } = props;
  const gradientValue = useGradientValue(GradientPercentage.END);
  const r14 = gradientValue != null ? Module689(gradientValue).alpha(0.95).hex() : null;
  let r50 = Module689(useToken(Module712.colors.CARD_BACKGROUND_DEFAULT)).alpha(0.95).hex();
  const bottom = useSafeAreaInsets_native().bottom;
  const enabled = useMobileVisualRefreshConfig({
    location: "MediaKeyboardBottomSheetActions"
  }).enabled;
  const token4 = useToken(Module712.colors.MOBILE_FLOATINGBAR_BACKGROUND_HIGHER);
  if (enabled) {
    r50 = token4;
  }
  const styles = useStyles(bottom, r50, r14, enabled);
  const token = useToken(Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_ICON_COLOR_ACTIVE);
  const token2 = useToken(Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_TEXT_COLOR_ACTIVE);
  const token3 = useToken(Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_TEXT_VARIANT);
  const memo = useMemo(() => ({
    start: {
      x: 0,
      y: 0
    },
    end: {
      x: 0,
      y: 1
    },
    colors: [Module689(styles.gradient.color).alpha(0).hex(), Module689(styles.gradient.color).alpha(1).hex()]
  }), [styles.gradient.color]);
  return <View style={styles.wrap} pointerEvents="box-none" onLayout={useCallback((a0) => {
    onHeightChange(a0.nativeEvent.layout.height);
  }, [onHeightChange])}>
    <Module4611 style={styles.gradient} {...memo} pointerEvents="none" />
    <View style={styles.container}>
      <View style={styles.buttonsContainer}>
        {overflowButtons.map((overflowButton, index) => {
          const { IconComponent, disabled } = overflowButton;
          let color = "text-muted";
          const r25 = [<IconComponent size="md" color={disabled ? "text-muted" : token} />, ,];
          if (!overflowButton.disabled) {
            color = token2;
          }
          r25[1] = <Text lineClamp={1} variant={token3} color={color}>{overflowButton.text}</Text>;
          return <PressableOpacity key={index} accessibilityRole="button" accessibilityLabel={overflowButton.text} accessibilityState={{
            disabled: overflowButton.disabled
          }} disabled={overflowButton.disabled} style={styles.button} onPress={overflowButton.onPress}>{r25}</PressableOpacity>;
        })}
      </View>
    </View>
  </View>;
});
export default r30;