// Metro module 15346 (f15347).
import { useState, useCallback } from "react";
import { ScrollView, View, StyleSheet } from "react-native";
import GuildDiscoveryCategoryStore from "../../../global_discovery_servers/GuildDiscoveryCategoryStore";
import { GuildPrimaryCategory } from "../../../guild_settings/discovery/GuildSettingsDiscoveryConstants";
import { GameControllerIcon } from "../../../../design/components/Icon/native/redesign/generated/GameControllerIcon";
import { TvIcon } from "../../../../design/components/Icon/native/redesign/generated/TvIcon";
import { ForumIcon } from "../../../../design/components/Icon/native/redesign/generated/ForumIcon";
import { ScienceIcon } from "../../../../design/components/Icon/native/redesign/generated/ScienceIcon";
import { MusicIcon } from "../../../../design/components/Icon/native/redesign/generated/MusicIcon";
import { BookCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/BookCheckIcon";
import { PaintPaletteIcon } from "../../../../design/components/Icon/native/redesign/generated/PaintPaletteIcon";
import { PiggyBankIcon } from "../../../../design/components/Icon/native/redesign/generated/PiggyBankIcon";
import { RobotIcon } from "../../../../design/components/Icon/native/redesign/generated/RobotIcon";
import { MedalIcon } from "../../../../design/components/Icon/native/redesign/generated/MedalIcon";
import { FoodIcon } from "../../../../design/components/Icon/native/redesign/generated/FoodIcon";
import { PaintbrushThinIcon } from "../../../../design/components/Icon/native/redesign/generated/PaintbrushThinIcon";
import { BicycleIcon } from "../../../../design/components/Icon/native/redesign/generated/BicycleIcon";
import { PencilSparkleIcon } from "../../../../design/components/Icon/native/redesign/generated/PencilSparkleIcon";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useCheckboxA11yNative } from "../../../../_bundle/Module3907";
import { Button } from "../../../../design/components/Button/native/Button.native";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import ICYMIActionCreators from "../../ICYMIActionCreators";
import ToastActionCreators from "../../../toast/native/ToastActionCreators";
import { intl, t } from "../../../../intl/index.native";
import { useStateFromStoresArray } from "../../../../_bundle/Module589";
import { ICYMIAnalytics } from "../../ICYMIAnalytics";
import { Text } from "../../../../design/components/Text/native/Text";
function $mk116923($env) {
  return () => (0, setState2)(false);
}
let useStyles;
const WordTopic = function WordTopic(props) {
  const { topic, categoryid, selected, handlePress } = props;
  const icon = GuildPrimaryCategory.GAMING === categoryid ? <GameControllerIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.ENTERTAINMENT === categoryid ? <TvIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.GENERAL_CHATTING === categoryid ? <ForumIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.SCIENCE_AND_TECH === categoryid ? <ScienceIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.MUSIC === categoryid ? <MusicIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.EDUCATION === categoryid ? <BookCheckIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.CREATIVE_ARTS === categoryid ? <PaintPaletteIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.FINANCE === categoryid ? <PiggyBankIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.BOTS === categoryid ? <RobotIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.SPORTS === categoryid ? <MedalIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.TRAVEL_AND_FOOD === categoryid ? <FoodIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.FASHION_AND_BEAUTY === categoryid ? <PaintbrushThinIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.FITNESS_AND_HEALTH === categoryid ? <BicycleIcon size="md" color="redesign-button-tertiary-text" /> : categoryid === 16 ? <PencilSparkleIcon size="md" color="redesign-button-tertiary-text" /> : void 0;
  const checkboxA11yNative = useCheckboxA11yNative({
    checked: selected
  });
  const { accessibilityRole, accessibilityState } = checkboxA11yNative;
  return icon != null ? <Button accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} variant={selected ? "primary" : "tertiary"} text={topic} onPress={() => handlePress(categoryid)} icon={icon} /> : null;
};
useStyles = createStyles({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
    flex: 1
  },
  footer: {
    position: "absolute",
    bottom: 0,
    left: Module712.space.PX_24,
    right: Module712.space.PX_24,
    paddingBottom: Module712.space.PX_8
  },
  title: {
    marginTop: Module712.space.PX_24,
    marginBottom: Module712.space.PX_8,
    marginHorizontal: Module712.space.PX_24
  },
  subtitle: {
    marginBottom: Module712.space.PX_24,
    marginHorizontal: Module712.space.PX_24
  },
  separator: {
    height: StyleSheet.hairlineWidth,
    width: "100%",
    backgroundColor: Module712.colors.BORDER_SUBTLE
  },
  topicsContainer: {
    flex: 1,
    marginHorizontal: Module712.space.PX_16,
    flexWrap: "wrap",
    flexDirection: "row",
    gap: Module712.space.PX_12
  },
  scrollContentContainer: {
    paddingTop: Module712.space.PX_24
  }
});
export default function ICYMITopicsScreen() {
  let callback;
  const styles = useStyles();
  const bottom = useSafeAreaInsets_native().bottom;
  const [state, setState] = useState(new Set());
  const [loading, setState2] = useState(false);
  const navigation = useNavigation();
  const callback2 = useCallback(async () => {
    const r29 = void 0;
    let c28002_1 = r29;
    let c28002_0 = r29;
    setState2(true);
    await import("../../ICYMIPopularGuildsStore");
    if (await ICYMIActionCreators.fetchPopularGuildsFromCategories(Array.from(state), 0)) {
      navigation.push("join_guilds");
    } else {
      ToastActionCreators.open({
        key: "ICYMIInfoModal",
        content: intl.string(t.CG4Hks)
      });
    }
    setTimeout($mk116923(c28002_0), 500);
  }, [navigation, state]);
  const stateFromStoresArray = useStateFromStoresArray([GuildDiscoveryCategoryStore], () => GuildDiscoveryCategoryStore.getAllCategories());
  callback = useCallback((a0) => {
    ICYMIAnalytics.trackFeedOnboardingCategoryToggled({
      categoryId: a0,
      toggled: !state.has(a0)
    });
    if (state.has(a0)) {
      setState((prevState) => {
        prevState.delete(a0);
        return new Set(prevState);
      });
    } else {
      setState((prevState) => {
        prevState.add(a0);
        return new Set(prevState);
      });
    }
  }, [state]);
  return <>
    <Text variant="heading-xl/semibold" color="mobile-text-heading-primary" style={styles.title}>
      {intl.string(t.Y5d99L)}
    </Text>
    <Text variant="text-sm/normal" color="text-muted" style={styles.subtitle}>
      {intl.string(t.MGZsfv)}
    </Text>
    <View style={styles.separator} />
    <ScrollView showsVerticalScrollIndicator={false} style={styles.container} contentContainerStyle={styles.scrollContentContainer} contentInset={{
      bottom: 72 + bottom
    }}>
      <View style={styles.topicsContainer}>
        {stateFromStoresArray.map((item) => <WordTopic key={item.categoryId} selected={state.has(item.categoryId)} topic={item.name} categoryid={item.categoryId} handlePress={callback} />)}
      </View>
    </ScrollView>
    {state.size > 0 && <View style={[{
      marginBottom: bottom
    }, styles.footer]}>
      <Button loading={loading} size="lg" text={intl.string(t.PDTjLN)} onPress={callback2} />
    </View>}
  </>;
};