// Metro module 8810 (f8811).
import { Pressable, View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { InputFieldContainer } from "../../../../design/components/Input/native/InputFieldContainer.native";
import { intl, t } from "../../../../intl/index.native";
import UserUtils from "../../../../utils/UserUtils";
import { MagnifyingGlassIcon } from "../../../../design/components/Icon/native/redesign/generated/MagnifyingGlassIcon";
import { Avatar, AvatarSizes } from "../../../../design/void/native";
import { Text } from "../../../../design/components/Text/native/Text";
import { CircleXIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleXIcon";
const useStyles = createStyles({
  container: {
    marginHorizontal: Module712.space.PX_16
  },
  content: {
    flexDirection: "row",
    overflow: "hidden",
    alignItems: "center",
    display: "flex"
  },
  opener: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
    paddingHorizontal: Module712.space.PX_16,
    paddingVertical: 6
  },
  openerWithClearButton: {
    paddingRight: 0
  },
  searchIcon: {
    marginRight: Module712.space.PX_8
  },
  userPill: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.lg,
    paddingVertical: 6,
    paddingHorizontal: 6
  },
  userPillText: {
    marginLeft: 6
  },
  clearButton: {
    alignItems: "center",
    justifyContent: "center",
    minWidth: 44,
    minHeight: 44,
    paddingRight: Module712.space.PX_16,
    paddingLeft: Module712.space.PX_8
  }
});
export default function SelectedUserField(props) {
  const { selectedUser, onPress: onPress2, setSelectedUser } = props;
  const styles = useStyles();
  return <View style={styles.container}>
    <InputFieldContainer>
      <View style={styles.content}>
        <Pressable style={[styles.opener, selectedUser != null && styles.openerWithClearButton]} onPress={onPress2} accessibilityRole="button" accessibilityLabel={selectedUser != null ? `${intl.string(t.xFn72s)}, ${UserUtils.getName(selectedUser)}` : `${intl.string(t.xFn72s)}, ${intl.string(t.R0vK0N)}`}>
          <MagnifyingGlassIcon style={styles.searchIcon} size="xs" color="interactive-text-default" />
          {selectedUser != null ? <View style={styles.userPill}>
            <Avatar user={selectedUser} guildId={void 0} size={AvatarSizes.XSMALL_20} />
            <Text variant="text-md/medium" style={styles.userPillText}>
              {UserUtils.getName(selectedUser)}
            </Text>
          </View> : <Text variant="text-sm/semibold" color="text-subtle" style={styles.userPillText}>
            {intl.string(t.R0vK0N)}
          </Text>}
        </Pressable>
        {selectedUser != null ? <Pressable style={styles.clearButton} onPress={() => setSelectedUser(void 0)} accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t["0Vb9FQ"], {
          text: UserUtils.getName(selectedUser)
        })}>
          <CircleXIcon size="xs" />
        </Pressable> : null}
      </View>
    </InputFieldContainer>
  </View>;
};