// Metro module 15338 (f15339).
import { useCallback, useLayoutEffect, useState } from "react";
import { ScrollView, View } from "react-native";
import { ThemeTypes } from "../../../../_bundle/Module505";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import useTheme from "../../../../hooks/useTheme";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import { ICYMIAnalytics } from "../../ICYMIAnalytics";
import { maybeFetchGuildDiscoveryCategories } from "../../../global_discovery_servers/GuildDiscoveryCategoryActionCreators";
import ModalActionCreators from "../../../../actions/ModalActionCreators";
import { HeaderIconButton } from "../../../main_tabs_v2/native/shared_components/HeaderShared";
import Module9126 from "../../../../_bundle/Module9126";
import { intl, t } from "../../../../intl/index.native";
import FastImage from "../../../../components_native/common/FastImage";
import Module15341 from "../../../../_bundle/Module15341";
import Module15342 from "../../../../_bundle/Module15342";
import Module15343 from "../../../../_bundle/Module15343";
import Module15344 from "../../../../_bundle/Module15344";
import { Text } from "../../../../design/components/Text/native/Text";
import { ServerIcon } from "../../../../design/components/Icon/native/redesign/generated/ServerIcon";
import { NewUserIcon } from "../../../../design/components/Icon/native/redesign/generated/NewUserIcon";
import { CircleCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
import { Button } from "../../../../design/components/Button/native/Button.native";
function $mk116922($env) {
  return () => {
    const r2 = $env;
    navigation.navigate("topics_cloud");
    setTimeout($mk118474(r2), 500);
  };
}
function $mk118474($env) {
  return () => (0, setState)(false);
}
const useStyles = createStyles({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
    position: "relative",
    flex: 1
  },
  closeIcon: {
    position: "absolute",
    justifyContent: "center",
    left: 12,
    width: 24,
    height: NAV_BAR_HEIGHT,
    zIndex: 2
  },
  closeIconColor: {
    backgroundColor: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY
  },
  bgImage: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    aspectRatio: 1.2515923566878981,
    overflow: "visible"
  },
  headerImg: {
    position: "absolute",
    top: 16,
    width: 361,
    height: 240
  },
  flashIcon: {
    marginBottom: 32,
    marginTop: 132
  },
  subContainer: {
    flex: 1,
    paddingHorizontal: 16,
    paddingTop: 16
  },
  header: {
    alignItems: "center",
    paddingHorizontal: 12
  },
  headerText: {
    textAlign: "center",
    marginTop: 8
  },
  body: {
    gap: 16,
    padding: 16,
    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
    borderRadius: Module712.radii.lg,
    marginTop: 40
  },
  divider: {
    height: 1,
    backgroundColor: Module712.colors.BORDER_SUBTLE,
    marginLeft: 48
  },
  infoRow: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    overflow: "hidden",
    gap: 16
  },
  infoIcon: {
    padding: 8,
    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
    borderRadius: Module712.radii.round
  },
  infoText: {
    flexShrink: 1
  },
  hint: {
    margin: 12
  },
  footer: {
    position: "absolute",
    bottom: 0,
    left: Module712.space.PX_24,
    right: Module712.space.PX_24,
    paddingBottom: Module712.space.PX_8
  }
});
export default function ICYMIInfoScreen(props) {
  let setState;
  const extendedOnboarding = props.extendedOnboarding;
  setState = void 0;
  const styles = useStyles();
  const safeAreaInsets_native = useSafeAreaInsets_native();
  const { top, bottom } = safeAreaInsets_native;
  const theme = useTheme();
  const navigation = useNavigation();
  const callback = useCallback(async () => {
    let c27995_0;
    L14: {
      c27995_0 = void 0;
      if (extendedOnboarding) {
        ICYMIAnalytics.trackFeedOnboardingScreenSkipped({
          location: "overview"
        });
        setState(true);
        await maybeFetchGuildDiscoveryCategories();
        setTimeout($mk116922(c27995_0), 100);
        break L14;
      }
      ModalActionCreators.pop();
      return void 0;
    }
  }, [extendedOnboarding, navigation]);
  useLayoutEffect(() => {
    navigation.setOptions({
      header: () => null
    });
  }, [navigation]);
  let loading;
  [loading, setState] = useState(false);
  const r76 = [<View style={[{
    marginTop: top
  }, styles.closeIcon]}>
    <HeaderIconButton source={Module9126} onPress={() => ModalActionCreators.pop()} accessibilityLabel={intl.string(t.cpT0Cq)} color={styles.closeIconColor.backgroundColor} />
  </View>, , ,];
  r76[1] = <ScrollView style={[styles.container, {
    marginBottom: bottom
  }]}>
    <FastImage source={{
      uri: Module15341
    }} style={styles.bgImage} />
    <View style={[styles.subContainer, {
      marginTop: top + Module712.space.PX_12
    }]}>
      <View style={styles.header}>
        <FastImage source={{
          uri: theme === ThemeTypes.LIGHT ? Module15342 : Module15343
        }} style={styles.headerImg} />
        <FastImage source={Module15344} style={styles.flashIcon} />
        <Text variant="heading-xl/bold" color="mobile-text-heading-primary">
          {intl.string(t["jnXV/V"])}
        </Text>
        <Text variant="text-md/normal" color="text-default" style={styles.headerText}>
          {intl.string(t["9SjvoK"])}
        </Text>
      </View>
      <View>
        <View style={styles.body}>
          <View style={styles.infoRow}>
            <View style={styles.infoIcon}>
              <ServerIcon size="sm" color="interactive-text-active" />
            </View>
            <Text variant="text-md/medium" color="mobile-text-heading-primary" style={styles.infoText}>
              {intl.string(t.knxfqR)}
            </Text>
          </View>
          <View style={styles.divider} />
          <View style={styles.infoRow}>
            <View style={styles.infoIcon}>
              <NewUserIcon size="sm" color="interactive-text-active" />
            </View>
            <Text variant="text-md/medium" color="mobile-text-heading-primary" style={styles.infoText}>
              {intl.string(t.BnUXZi)}
            </Text>
          </View>
          <View style={styles.divider} />
          <View style={styles.infoRow}>
            <View style={styles.infoIcon}>
              <CircleCheckIcon size="sm" color="interactive-text-active" />
            </View>
            <Text variant="text-md/medium" color="mobile-text-heading-primary" style={styles.infoText}>
              {intl.string(t.itb1rh)}
            </Text>
          </View>
        </View>
        <Text variant="text-xs/medium" color="text-muted" style={styles.hint}>
          {intl.format(t["jVS/hc"], {
            feedbackHook: (a0, a1) => <Text key={a1} variant="text-xs/medium" color="text-link" onPress={() => ActionSheetActionCreators.openLazy(import("../ICYMIFeedbackSheet"), "ICYMIFeedbackSheet", {})}>
              {a0}
            </Text>
          })}
        </Text>
      </View>
    </View>
  </ScrollView>;
  r76[2] = <View style={[{
    marginBottom: bottom
  }, styles.footer]}>
    <Button size="lg" loading={loading} text={extendedOnboarding ? intl.string(t.LhlgY9) : intl.string(t["+IrDzN"])} onPress={callback} />
  </View>;
  return <>{r76}</>;
};