// Metro module 11486 (f11487).
import { View } from "react-native";
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import FastImage from "../../../components_native/common/FastImage";
import AvatarUtils from "../../../utils/AvatarUtils";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
const useStyles = createStyles({
  upsell: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  title: {
    lineHeight: 16,
    flex: 1
  },
  emojis: {
    height: 28
  },
  emojiWrapper: {
    position: "absolute",
    width: 28,
    height: 28,
    padding: 2,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    borderWidth: 2,
    borderRadius: 14,
    borderColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    alignItems: "center",
    justifyContent: "center"
  },
  emoji: {
    width: 16,
    height: 16
  }
});
export default function ChannelAutocompleteEmojiUpsell(props) {
  const results = props.results;
  const styles = useStyles();
  const r18 = results.slice(0, 3);
  const r9 = r18.map((item, index) => <View key={item.id} style={[styles.emojiWrapper, {
    left: 24 * index
  }]}>
    <FastImage style={styles.emoji} source={{
      uri: item.id != null ? AvatarUtils.getEmojiURL({
        id: item.id,
        animated: item.animated,
        size: EMOJI_URL_BASE_SIZE
      }) : item.url
    }} />
  </View>);
  const r22 = 24 * r18.length;
  return <View style={styles.upsell}>
    <Text style={styles.title} accessibilityRole="header" variant="text-sm/medium">
      {intl.format(t.uEky42, {
        count: results.length
      })}
    </Text>
    <View style={[styles.emojis, {
      width: r22 + 16
    }]}>{r9}</View>
  </View>;
};