// Metro module 9426 (f9427).
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import EmojiUtils from "../../../../utils/EmojiUtils";
import AvatarUtils from "../../../../utils/AvatarUtils";
import Emoji2 from "../../../emojis/native/Emoji";
import { useSharedMessageEmojiStyles } from "./useSharedMessageEmojiStyles";
import chunk from "../../../../_bundle/chunk";
import { GappedList } from "../../../guild_role_subscriptions/native/components/LayoutUtils";
let useStyles;
const Emoji = function Emoji(props) {
  const guildEmoji = props.guildEmoji;
  const styles = useStyles();
  return <Emoji2 key={guildEmoji.id} src={guildEmoji.id == null ? EmojiUtils.getURL(guildEmoji.name) : AvatarUtils.getEmojiURL({
    id: guildEmoji.id,
    animated: guildEmoji.animated,
    size: 48
  })} fastImageStyle={styles.gridEmojiFastImage} textEmojiStyle={styles.gridEmojiText} name={guildEmoji.name} />;
};
useStyles = createStyles({
  gridEmojiFastImage: {
    height: 40,
    width: 40,
    borderRadius: Module712.radii.sm
  },
  gridEmojiText: {
    fontSize: 18,
    lineHeight: 44
  },
  emojiGridRowContainer: {
    marginTop: 16,
    flexDirection: "row"
  },
  emojiGridContainer: {
    marginTop: 8,
    alignItems: "center"
  }
});
export function EmojiGrid(props) {
  const { expressionSourceGuild, doNotDisplayEmojiIds = [] } = props;
  let c17211_0 = doNotDisplayEmojiIds;
  const { numberToShow = 10, maxPerRow = 5 } = props;
  const r10 = {
    ...useSharedMessageEmojiStyles(),
    ...useStyles()
  };
  let c17211_1 = r10;
  let r24 = expressionSourceGuild?.emojis;
  if (r24 == null) {
    r24 = [];
  }
  return <View style={r10.emojiGridContainer}>
    <GappedList gap={8}>
      {chunk(r24.slice(0, numberToShow + 1).filter((item) => !c17211_0.includes(item.id)).slice(0, numberToShow), maxPerRow).map((a0, index) => <View key={index} style={c17211_1.emojiGridRowContainer}>
        <GappedList gap={32}>
          {a0.map((item) => <Emoji key={item.id} guildEmoji={item} />)}
        </GappedList>
      </View>)}
    </GappedList>
  </View>;
}