// Metro module 15112 (f15113).
import { useState, useCallback } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import useDisplayNameStyles from "../../display_name_styles/hooks/useDisplayNameStyles";
import { useDisplayNameStylesFont } from "../../display_name_styles/native/useDisplayNameStylesFont";
import { Text } from "../../../design/components/Text/native/Text";
import UserUtils from "../../../utils/UserUtils";
import { intl, t } from "../../../intl/index.native";
import VoiceGuildTag from "../../guild_tag/native/VoiceGuildTag";
const useStyles = createStyles({
  container: {
    marginLeft: 8,
    flex: 1,
    flexDirection: "row"
  },
  tag: {
    flexDirection: "row",
    alignItems: "center",
    paddingLeft: 8
  },
  measuringTag: {
    opacity: 0
  }
});
export default function VoiceUserNameItem(props) {
  const { member, user, guildId } = props;
  let isGuest = props.isGuest;
  const { color, variant } = props;
  const styles = useStyles();
  const displayNameStylesFont = useDisplayNameStylesFont({
    displayNameStyles: useDisplayNameStyles({
      userId: user.id,
      guildId
    })
  });
  const [state, setState] = useState(0);
  const [state2, setState2] = useState(0);
  let [state3, setState3] = useState(true);
  const [state4, setState4] = useState(0);
  const callback2 = useCallback((a0) => {
    setState(a0.nativeEvent.layout.width);
  }, []);
  const callback = useCallback((a0) => {
    setState2(a0.nativeEvent.layout.width);
  }, []);
  const callback3 = useCallback((a0) => {
    setState4(a0.nativeEvent.layout.width);
    setState3(false);
  }, []);
  const style = [styles.container, state3 ? styles.measuringTag : state3];
  const style2 = displayNameStylesFont != null && {
    fontFamily: displayNameStylesFont
  };
  let r77 = member?.nick;
  if (r77 == null) {
    r77 = UserUtils.getName(user);
  }
  const r81 = [r77, ,];
  if (isGuest) {
    isGuest = <Text variant="text-sm/normal" lineClamp={1} color="status-positive">
      {" "}
      {intl.string(t["pFO/Ph"])}
    </Text>;
  }
  r81[1] = isGuest;
  const r96 = [<Text variant={variant} color={color} lineClamp={1} onLayout={callback} style={style2}>{r81}</Text>, ,];
  if (!state3) {
    state3 = state !== 0 && state2 !== 0 && state4 !== 0 && state >= state2 + state4;
  }
  if (state3) {
    state3 = <View onLayout={callback3} style={styles.tag}>
      <VoiceGuildTag userId={user.id} />
    </View>;
  }
  r96[1] = state3;
  return <View onLayout={callback2} style={style}>{r96}</View>;
};