// Metro module 10207 (f10208).
import { View } from "react-native";
import { EMPTY_STRING_SNOWFLAKE_ID, MAX_VISUAL_ROLE_LENGTH } from "../../Constants";
import { createStyles } from "../../design/components/Styles/native/createStyles";
import Module712 from "../../_bundle/Module712";
import { DeveloperMode } from "../../modules/user_settings/UserSettings";
import { useRoleIcon } from "../../modules/guild_boosting/native/RoleIconUtils";
import { copy } from "../../utils/ClipboardUtils.native";
import { roleIdCopied } from "../../modules/toast/native/ToastUtils";
import { PressableHighlight } from "../../design/void/Pressables/native/Pressables";
import VerifiedRoleIcon from "../../modules/connections/native/VerifiedRoleIcon";
import { Text } from "../../design/components/Text/native/Text";
const useStyles = createStyles({
  container: {
    marginRight: 4,
    marginBottom: 4,
    borderRadius: Module712.radii.xs
  },
  pill: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 8,
    paddingVertical: 6,
    borderRadius: Module712.radii.xs,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
  },
  bubble: {
    marginRight: 8,
    borderRadius: Module712.radii.sm,
    height: 12,
    width: 12,
    backgroundColor: Module712.colors.ICON_MUTED
  },
  verifiedContainer: {
    marginRight: 8,
    borderRadius: Module712.radii.sm,
    height: 12,
    width: 12
  },
  roleIcon: {
    paddingRight: 4
  }
});
export default function RolePill(props) {
  let r59;
  const role = props.role;
  let guildId = props.guildId;
  const disableInteraction = props.disableInteraction;
  let color = props.color;
  const setting = DeveloperMode.useSetting();
  const roleIcon = useRoleIcon({
    guildId,
    roleId: role.id,
    size: 12
  });
  let name2 = role.name;
  let name = name2;
  if (role.name.length > MAX_VISUAL_ROLE_LENGTH) {
    name = `${role.name.slice(0, MAX_VISUAL_ROLE_LENGTH)}...`;
    name2 = name;
  }
  if (color == null) {
    color = role.colorString;
  }
  const guild_connections = role.tags?.guild_connections;
  const styles = useStyles();
  const props2 = {
    disabled: setting ? disableInteraction : !setting,
    style: styles.container,
    onPress: function handlePress() {
      copy(role.id);
      roleIdCopied(name);
    },
    accessible: false,
    children: null
  };
  if (guild_connections !== void 0) {
    if (guildId == null) {
      guildId = EMPTY_STRING_SNOWFLAKE_ID;
    }
    if (color == null) {
      color = void 0;
    }
    r59 = <VerifiedRoleIcon style={styles.verifiedContainer} roleId={role.id} guildId={guildId} roleColor={color} size={14} displayRoleIcon={false} />;
  } else {
    r59 = <View style={[styles.bubble, color != null ? {
      backgroundColor: color
    } : {}]} />;
  }
  props2.children = <View style={styles.pill}>
    {r59}
    {roleIcon != null ? <View style={styles.roleIcon}>{roleIcon}</View> : null}
    <Text variant="text-xs/semibold" color="interactive-text-active">{name2}</Text>
  </View>;
  return <PressableHighlight {...props2} />;
};