// Metro module 11751 (f11752).
import { useCallback, useEffect } from "react";
import { ScrollView, View } from "react-native";
import EmojiStore from "../../emojis/EmojiStore";
import ChannelStore from "../../../stores/ChannelStore";
import GuildStore from "../../../stores/GuildStore";
import PermissionStore from "../../../stores/PermissionStore";
import WelcomeScreenStore, { NO_WELCOME_SCREEN } from "../WelcomeScreenStore";
import { WELCOME_SCREEN_TYPE } from "../WelcomeScreenConstants";
import { AnalyticEvents, Routes, Fonts } from "../../../Constants";
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
import { Permissions } from "../../../_bundle/Module505";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import TextStyles from "../../rebrand/native/TextStyles";
import { useStateFromStores, useStateFromStoresObject } from "../../../_bundle/Module589";
import useChannelName from "../../channel/useChannelName";
import { transitionTo } from "../../routing/router_utils";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import FastImage from "../../../components_native/common/FastImage";
import AvatarUtils from "../../../utils/AvatarUtils";
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 { FormRow } from "../../../design/void/Form/native/index";
import Dispatcher from "../../../Dispatcher";
import { fetchWelcomeScreen, welcomeScreenViewed } from "../WelcomeScreenActionCreators";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
import GuildInviteIcon from "../../guild/native/GuildInviteIcon";
import { intl, t } from "../../../intl/index.native";
let useStyles;
const WelcomeChannelRow = function WelcomeChannelRow(props) {
  let leading;
  const { welcomeChannel, trackOptionSelect: trackOptionSelect2 } = props;
  const styles2 = useStyles();
  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(welcomeChannel.channel_id));
  const channelName = useChannelName(stateFromStores, true);
  const stateFromStores3 = useStateFromStores([PermissionStore], () => stateFromStores != null && PermissionStore.can(Permissions.VIEW_CHANNEL, stateFromStores));
  const stateFromStores2 = useStateFromStores([EmojiStore], () => welcomeChannel.emoji_id != null ? EmojiStore.getCustomEmojiById(welcomeChannel.emoji_id) : null, [welcomeChannel.emoji_id]);
  const callback2 = useCallback(() => {
    if (stateFromStores != null) {
      trackOptionSelect2();
      transitionTo(Routes.CHANNEL(stateFromStores.guild_id, stateFromStores.id));
      ActionSheetActionCreators.hideActionSheet();
    }
  }, [stateFromStores, trackOptionSelect2]);
  const r48 = stateFromStores != null;
  let r49 = null;
  if (r48) {
    r49 = null;
    if (stateFromStores3) {
      L9: {
        if (stateFromStores2 != null) {
          leading = <FastImage style={styles2.emoji} source={{
            uri: AvatarUtils.getEmojiURL({
              id: stateFromStores2.id,
              animated: stateFromStores2.animated,
              size: EMOJI_URL_BASE_SIZE
            })
          }} resizeMode="contain" />;
        } else {
          if (welcomeChannel.emoji_name != null && UnicodeEmojis.getByName(UnicodeEmojis.convertSurrogateToName(welcomeChannel.emoji_name, false)) != null) {
            leading = <Text style={styles2.emoji} variant="text-sm/medium">{welcomeChannel.emoji_name}</Text>;
            break L9;
          }
          leading = <View style={styles2.placeholderEmojiWrapper}>
            <Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module10990} />
          </View>;
        }
      }
      r49 = <FormRow DEPRECATED_style={styles2.welcomeChannel} leading={leading} label={<Text variant="text-sm/semibold" color="interactive-text-active">{welcomeChannel.description}</Text>} subLabel={stateFromStores != null ? <Text variant="text-sm/medium" color="text-default">{channelName}</Text> : null} onPress={callback2} trailing={<FormRow.Arrow />} />;
    }
  }
  return r49;
};
useStyles = createStyles({
  container: {
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 16,
    width: "100%",
    paddingVertical: 32,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  guildIcon: {
    borderRadius: Module712.radii.sm,
    width: 64,
    height: 64,
    marginBottom: 16
  },
  header: {
    ...TextStyles(Fonts.DISPLAY_EXTRABOLD, Module712.colors.TEXT_SUBTLE, 24),
    marginBottom: 8,
    textAlign: "center"
  },
  headerGuildName: {
    ...TextStyles(Fonts.DISPLAY_EXTRABOLD, Module712.colors.MOBILE_TEXT_HEADING_PRIMARY, 24)
  },
  guildDescription: {
    textAlign: "center",
    marginBottom: 30
  },
  welcomeChannel: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    marginTop: 8,
    borderRadius: Module712.radii.sm
  },
  channelsTitle: {
    alignSelf: "flex-start"
  },
  emoji: {
    width: 24,
    height: 24
  },
  placeholderEmojiWrapper: {
    padding: 4,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    borderRadius: Module712.radii.xs
  }
});
export default function GuildWelcomeActionSheet(props) {
  let welcomeScreen, fetching, hasError, callback;
  const { guildId, onHide } = props;
  welcomeScreen = void 0;
  fetching = void 0;
  hasError = void 0;
  callback = void 0;
  const styles = useStyles();
  const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
  const stateFromStoresObject = useStateFromStoresObject([WelcomeScreenStore], () => ({
    welcomeScreen: WelcomeScreenStore.get(guildId),
    fetching: WelcomeScreenStore.isFetching(),
    hasError: WelcomeScreenStore.hasError()
  }));
  welcomeScreen = stateFromStoresObject.welcomeScreen;
  fetching = stateFromStoresObject.fetching;
  hasError = stateFromStoresObject.hasError;
  useEffect(() => {
    if (welcomeScreen == null) {
      Dispatcher.wait(() => fetchWelcomeScreen(guildId));
    }
  }, [guildId, welcomeScreen]);
  useEffect(() => {
    if (fetching === false && hasError === true) {
      ActionSheetActionCreators.hideActionSheet();
    }
  }, [fetching, hasError]);
  useEffect(() => {
    if (welcomeScreen != null) {
      Dispatcher.wait(() => welcomeScreenViewed(guildId));
    }
  }, [guildId, welcomeScreen]);
  useEffect(() => {
    if (welcomeScreen === NO_WELCOME_SCREEN) {
      ActionSheetActionCreators.hideActionSheet();
    }
  }, [welcomeScreen]);
  useEffect(() => {
    AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
      type: WELCOME_SCREEN_TYPE,
      guild_id: guildId
    });
  }, [guildId]);
  useEffect(() => () => {
    if (onHide != null) {
      onHide();
    }
  }, [onHide]);
  callback = useCallback((a0) => {
    if (welcomeScreen != null) {
      const options = [];
      let c27145_0 = options;
      const options_channel_ids = [];
      let c27145_1 = options_channel_ids;
      let has_custom_emojis = false;
      welcomeScreen.welcome_channels.forEach((welcome_channel) => {
        c27145_0.push(welcome_channel.description);
        c27145_1.push(welcome_channel.channel_id);
        if (welcome_channel.emoji_id != null) {
          has_custom_emojis = true;
        }
      });
      AnalyticsUtils.track(AnalyticEvents.GUILD_WELCOME_SCREEN_OPTION_SELECTED, {
        index: a0,
        guild_id: guildId,
        options,
        options_channel_ids,
        guild_description: welcomeScreen.description,
        has_custom_emojis
      });
    }
  }, [guildId, welcomeScreen]);
  return stateFromStores2 == null ? null : welcomeScreen == null ? null : <ActionSheet startExpanded>
    <ScrollView contentContainerStyle={styles.container}>
      <GuildInviteIcon style={styles.guildIcon} guild={stateFromStores2} size={GuildInviteIcon.Sizes.MEDIUM} textScale={2} />
      <Text style={styles.header} variant="heading-xl/extrabold" color="text-default">
        {intl.format(t["0aydCN"], {
          guildName: stateFromStores2.name,
          guildNameHook: (a0, a1) => <Text key={a1} style={styles.headerGuildName} variant="heading-xl/extrabold" color="mobile-text-heading-primary">
            {a0}
          </Text>
        })}
      </Text>
      <Text style={styles.guildDescription} variant="text-sm/medium" color="text-default">{welcomeScreen.description}</Text>
      <Text style={styles.channelsTitle} variant="eyebrow" color="text-default">
        {intl.string(t["haj5+i"]).toUpperCase()}
      </Text>
      {welcomeScreen.welcome_channels.map((welcome_channel, index) => {
        return <WelcomeChannelRow key={index} welcomeChannel={welcome_channel} trackOptionSelect={() => callback(index)} />;
      })}
    </ScrollView>
  </ActionSheet>;
};
export { WelcomeChannelRow };