discord-decomp/modules/video_calls/native/components/CallBarAction.tsx

// Metro module 10528 (f10529).
import { cloneElement } from "react";
import { Image as Image2, View } from "react-native";
import { resetFocusTimer } from "../ChannelCallStore";
import { hexWithOpacity } from "../../../../utils/ColorUtils";
import Module712 from "../../../../_bundle/Module712";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import useBottomVoiceControlsSheetWidth from "../useBottomVoiceControlsSheetWidth";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import CircleWithCutoutUtils, { getBadgeTop, getBadgeLeft } from "../../../voice_panel/native/shared/CircleWithCutoutUtils";
import { Text } from "../../../../design/components/Text/native/Text";
let circleFillColor, c7070_10, c7070_11, c7070_12, useStyles;
const ActionButton = function ActionButton(props) {
  let appearsDisabled = props.appearsDisabled;
  if (appearsDisabled === void 0) {
    appearsDisabled = false;
  }
  let backgroundColor = props.backgroundColor;
  const { imageStyle, onPress: onPress2, accessibilityLabel, accessibilityState, source, showBadge = false, isSmallSize = false, children, lottieComponent, lottieComponentColor, IconComponent } = props;
  const styles = useStyles();
  const bottomVoiceControlsSheetWidth = useBottomVoiceControlsSheetWidth();
  const marginHorizontal = isSmallSize ? bottomVoiceControlsSheetWidth < c7070_12 ? 6 : 12 : 12;
  const r18 = isSmallSize ? c7070_11 : c7070_10;
  const width = 2 * r18.buttonRadius;
  const width2 = 2 * r18.badgeRadius;
  const cutoutRadius = r18.badgeRadius + r18.cutoutInset;
  const props2 = {
    accessibilityLabel,
    accessibilityRole: "button",
    accessibilityState,
    onPress: () => {
      resetFocusTimer();
      onPress2();
    },
    disabled: false,
    style: {
      width,
      height: width,
      borderRadius: r18.buttonRadius,
      marginHorizontal
    },
    children: null
  };
  const style = [styles.buttonContainer, {
    width,
    height: width,
    borderRadius: r18.buttonRadius
  }, {
    opacity: appearsDisabled ? 0.25 : 1
  }];
  if (backgroundColor == null) {
    backgroundColor = circleFillColor;
  }
  props2.children = <View style={style}>
    <CircleWithCutoutUtils circleRadius={r18.buttonRadius} cutoutRadius={cutoutRadius} enableCutout={showBadge} cutoutPositionInDegrees={45} circleFillColor={backgroundColor} />
    <View style={[styles.iconContainer, {
      width,
      height: width
    }]}>
      {lottieComponent != null ? cloneElement(lottieComponent, {
        color: lottieComponentColor
      }) : IconComponent != null ? <IconComponent style={imageStyle} /> : <Image2 source={source} style={imageStyle} />}
    </View>
    {showBadge ? <View style={[styles.badge, {
      width: width2,
      height: width2,
      borderRadius: r18.badgeRadius,
      top: getBadgeTop(r18.badgeRadius, r18.buttonRadius, 45),
      left: getBadgeLeft(r18.badgeRadius, r18.buttonRadius, 45)
    }]} /> : null}
    {children}
  </View>;
  return <PressableOpacity {...props2} />;
};
circleFillColor = hexWithOpacity(Module712.unsafe_rawColors.WHITE, 0.24);
c7070_10 = Object.freeze({
  buttonRadius: 28,
  badgeRadius: 6,
  cutoutInset: 3
});
c7070_11 = Object.freeze({
  buttonRadius: 24,
  badgeRadius: 4,
  cutoutInset: 2
});
c7070_12 = 24 + 2 * c7070_11.buttonRadius * 5 + 96;
useStyles = createStyles({
  buttonContainer: {
    position: "absolute"
  },
  iconContainer: {
    position: "absolute",
    justifyContent: "center",
    alignItems: "center"
  },
  badge: {
    backgroundColor: "white",
    position: "absolute"
  },
  notificationArea: {
    position: "absolute",
    top: -4,
    right: -4,
    height: 24,
    minWidth: 24,
    paddingHorizontal: 4,
    borderRadius: 12,
    borderWidth: 4,
    borderColor: Module712.unsafe_rawColors.PRIMARY_760,
    alignItems: "center",
    justifyContent: "center"
  },
  notificationText: {
    lineHeight: 16
  },
  notificationAreaMentioned: {
    backgroundColor: Module712.colors.CONTROL_CRITICAL_PRIMARY_BACKGROUND_DEFAULT
  },
  notificationAreaUnread: {
    backgroundColor: Module712.unsafe_rawColors.PRIMARY_600
  }
});
export { c7070_11 as SMALL_ACTION_BUTTON_DIMENSIONS };
export { ActionButton };
export function ToggledActionButton(props) {
  const { isActive, disableTint = false, showBadge = false, isSmallSize = false, backgroundColor: _backgroundColor, tintColor: _tintColor, ...props2 } = props;
  let backgroundColor = props.backgroundColor;
  let tintColor = props.tintColor;
  const r2 = isActive ? Module712.unsafe_rawColors.WHITE : null;
  const r25 = isActive ? Module712.unsafe_rawColors.PRIMARY_900 : Module712.unsafe_rawColors.WHITE;
  const r26 = disableTint ? void 0 : r25;
  if (backgroundColor == null) {
    backgroundColor = r2;
  }
  const tintColor2 = tintColor == null ? r26 : tintColor;
  if (tintColor == null) {
    tintColor = r26;
  }
  return <ActionButton backgroundColor={backgroundColor} imageStyle={{
    tintColor: tintColor2
  }} accessibilityState={{
    selected: isActive
  }} isSmallSize={isSmallSize} {...props2} showBadge={showBadge} lottieComponentColor={tintColor} />;
}
export function PrimaryActionButton(props) {
  const { isSmallSize = false, ...rest } = props;
  return <ActionButton backgroundColor={Module712.unsafe_rawColors.RED_400} imageStyle={{
    tintColor: Module712.unsafe_rawColors.WHITE
  }} isSmallSize={isSmallSize} {...rest} />;
}
export function NotifiedActionButton(props) {
  const { notifications, isMentioned, ...props2 } = props;
  const styles = useStyles();
  return <View>
    <ActionButton {...props2}>
      <View style={[styles.notificationArea, isMentioned !== true && isMentioned !== void 0 ? styles.notificationAreaUnread : styles.notificationAreaMentioned]}>
        <Text style={styles.notificationText} variant="text-xs/semibold" color="text-overlay-light">{notifications}</Text>
      </View>
    </ActionButton>
  </View>;
}