// Metro module 15432 (f15433).
import { useCallback, useEffect } from "react";
import { View } from "react-native";
import EmojiStore from "../../emojis/EmojiStore";
import ChannelStore from "../../../stores/ChannelStore";
import GuildMemberStore from "../../../stores/GuildMemberStore";
import GuildStore from "../../../stores/GuildStore";
import PermissionStore from "../../../stores/PermissionStore";
import GuildOnboardingHomeSettingsStore from "../GuildOnboardingHomeSettingsStore";
import GuildOnboardingMemberActionStore from "../GuildOnboardingMemberActionStore";
import { Permissions } from "../../../Constants";
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
import { GuildMemberFlags } from "../../guild_member/GuildMemberConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import useChannelName from "../../channel/useChannelName";
import AvatarUtils from "../../../utils/AvatarUtils";
import { selectNewMemberActionChannel, fetchNewMemberActions } from "../GuildOnboardingHomeActionCreators";
import FastImage from "../../../components_native/common/FastImage";
import UnicodeEmojis from "../../emojis/UnicodeEmojis";
import { Text } from "../../../design/components/Text/native/Text";
import { Icon } from "../../../design/void/native";
import Module10990 from "../../../_bundle/Module10990";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { intl, t } from "../../../intl/index.native";
import Module11442 from "../../../_bundle/Module11442";
import Module15433 from "../../../_bundle/Module15433";
import { hasFlag } from "../../../_bundle/Module1384";
import Module15434 from "../../../_bundle/Module15434";
let useStyles;
const MemberActionRow = function MemberActionRow(props) {
  let r82;
  const { channelId, title } = props;
  let emoji = props.emoji;
  const { icon, completed } = props;
  const styles = useStyles();
  if (emoji == null) {
    emoji = {};
  }
  const { id, name } = emoji;
  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
  const channelName = useChannelName(stateFromStores, true);
  const stateFromStores6 = useStateFromStores([PermissionStore], () => PermissionStore.can(Permissions.VIEW_CHANNEL, stateFromStores));
  const stateFromStores5 = useStateFromStores([EmojiStore], () => id != null ? EmojiStore.getCustomEmojiById(id) : null, [id]);
  const newMemberActionIconURL = AvatarUtils.getNewMemberActionIconURL({
    channelId,
    icon
  });
  const callback = useCallback(() => {
    if (stateFromStores != null) {
      selectNewMemberActionChannel(stateFromStores.guild_id, stateFromStores.id);
    }
  }, [stateFromStores]);
  const r55 = stateFromStores != null;
  let r56 = null;
  if (r55) {
    r56 = null;
    if (stateFromStores6) {
      L14: {
        if (newMemberActionIconURL != null) {
          r82 = <FastImage style={styles.icon} source={{
            uri: newMemberActionIconURL
          }} resizeMode="contain" />;
        } else if (stateFromStores5 != null) {
          r82 = <FastImage style={styles.emoji} source={{
            uri: AvatarUtils.getEmojiURL({
              id: stateFromStores5.id,
              animated: stateFromStores5.animated,
              size: EMOJI_URL_BASE_SIZE
            })
          }} resizeMode="contain" />;
        } else {
          if (name != null && UnicodeEmojis.getByName(UnicodeEmojis.convertSurrogateToName(name, false)) != null) {
            r82 = <Text style={styles.textEmoji} variant="heading-xxl/normal">{name}</Text>;
            break L14;
          }
          r82 = <View style={styles.emojiPlaceholder}>
            <Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module10990} />
          </View>;
        }
      }
      r56 = <PressableOpacity onPress={callback} style={styles.actionContainer}>
        {r82}
        <View style={styles.channelNameContainer}>
          <Text variant="text-md/semibold" color="mobile-text-heading-primary">{title}</Text>
          <Text variant="text-xs/normal" color="text-muted">
            {intl.format(t.MkzlDL, {
              channelName
            })}
          </Text>
        </View>
        <Icon disableColor size={Icon.Sizes.MEDIUM} source={completed ? Module11442 : Module15433} />
      </PressableOpacity>;
    }
  }
  return r56;
};
useStyles = createStyles({
  actionsContainer: {
    paddingHorizontal: 12
  },
  actionsHeader: {
    display: "flex",
    marginBottom: 16
  },
  actionContainer: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    marginBottom: 8,
    padding: 12,
    borderRadius: Module712.radii.sm,
    display: "flex",
    flexDirection: "row",
    alignItems: "center"
  },
  channelNameContainer: {
    flex: 1,
    marginHorizontal: 8
  },
  icon: {
    width: 40,
    height: 40,
    borderRadius: Module712.radii.xs
  },
  emoji: {
    width: 40,
    height: 40
  },
  textEmoji: {
    width: 40,
    textAlign: "center"
  },
  emojiPlaceholder: {
    width: 40,
    height: 40,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    borderRadius: 20,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }
});
export default function GuildOnboardingNewMemberActions(props) {
  let stateFromStores2, stateFromStores3, stateFromStores4;
  const guildId = props.guildId;
  stateFromStores2 = void 0;
  stateFromStores3 = void 0;
  stateFromStores4 = void 0;
  const styles = useStyles();
  const stateFromStores5 = useStateFromStores([GuildOnboardingHomeSettingsStore], () => GuildOnboardingHomeSettingsStore.getNewMemberActions(guildId), [guildId]);
  stateFromStores2 = useStateFromStores([GuildOnboardingMemberActionStore], () => GuildOnboardingMemberActionStore.getCompletedActions(guildId));
  stateFromStores3 = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getSelfMember(guildId));
  stateFromStores4 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
  useEffect(() => {
    let r9 = stateFromStores2 == null && stateFromStores3?.flags != null;
    if (r9) {
      let flags = stateFromStores3.flags;
      if (flags == null) {
        flags = 0;
      }
      r9 = hasFlag(flags, GuildMemberFlags.STARTED_HOME_ACTIONS);
    }
    if (r9) {
      fetchNewMemberActions(guildId);
    }
  }, [stateFromStores2, guildId, stateFromStores3?.flags]);
  const callback = useCallback(() => {
    if (stateFromStores4 != null && stateFromStores4?.rulesChannelId != null) {
      selectNewMemberActionChannel(stateFromStores4.id, stateFromStores4.rulesChannelId);
    }
  }, [stateFromStores4]);
  return stateFromStores3 == null ? null : stateFromStores5 == null ? null : stateFromStores5.length !== 0 ? <View style={styles.actionsContainer}>
    <View style={styles.actionsHeader}>
      <Text variant="heading-lg/bold" color="mobile-text-heading-primary">
        {intl.string(t.LhlgY9)}
      </Text>
    </View>
    {stateFromStores5.map((item) => {
      let completed = stateFromStores2 == null ? void 0 : stateFromStores2[item.channelId];
      if (completed == null) {
        completed = false;
      }
      return <MemberActionRow key={`member-action-${item.channelId}`} channelId={item.channelId} title={item.title} emoji={item.emoji} icon={item.icon} completed={completed} />;
    })}
    {stateFromStores4?.rulesChannelId != null && <PressableOpacity onPress={callback} style={styles.actionContainer}>
      <View style={styles.emojiPlaceholder}>
        <Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module15434} />
      </View>
      <View style={styles.channelNameContainer}>
        <Text variant="text-md/semibold" color="mobile-text-heading-primary">
          {intl.string(t["K/i3iQ"])}
        </Text>
      </View>
    </PressableOpacity>}
  </View> : null;
};