// Metro module 5536 (f5537).
import { useMemo, useLayoutEffect, useRef, useEffect } from "react";
import { View, StyleSheet } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import GuildRoleStore from "../../../stores/GuildRoleStore";
import GuildStore from "../../../stores/GuildStore";
import UserStore from "../../../stores/UserStore";
import GuildOnboardingPromptsStore from "../GuildOnboardingPromptsStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
import useGuildRoleMemberCounts from "../../guild_role_subscriptions/useGuildRoleMemberCounts";
import { useThemeContext } from "../../../_bundle/Module3901";
import { useProfileThemeValues } from "../../user_profile/useProfileThemeValues.native";
import AvatarUtils from "../../../utils/AvatarUtils";
import getDevicePixelRatio_native from "../../../utils/getDevicePixelRatio.native";
import { isNotNullish } from "../../../utils/GlobalUtils";
import { useIsScreenReaderEnabled } from "../../a11y/native/useIsScreenReaderEnabled.native";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import * as _timing from "../../../design/animation/reanimated/timing/timing";
import FastImage from "../../../components_native/common/FastImage";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { Avatar, AvatarSizes } from "../../../design/void/native";
import { RoleItem } from "../../user_profile/native/UserProfileRolesCard";
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
import Module3771 from "../../../_bundle/Module3771";
import Module5569 from "../../../_bundle/Module5569";
import { Button } from "../../../design/components/Button/native/Button.native";
const ANIMATION_DURATION = 400;
const useStyles = createStyles({
  screen: {
    flex: 1,
    position: "relative"
  },
  container: {
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    paddingHorizontal: 24,
    display: "flex",
    justifyContent: "center",
    flexGrow: 1
  },
  containerWithoutSplash: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
  },
  backgroundImage: {
    position: "absolute",
    width: "100%",
    height: "100%"
  },
  title: {},
  subtitle: {
    marginTop: 16
  },
  card: {
    marginTop: 24,
    padding: 16,
    paddingBottom: 32,
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  username: {
    marginTop: 16
  },
  rolesHeader: {
    marginTop: 8
  },
  roles: {
    marginTop: 12,
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap"
  },
  role: {
    marginRight: 8
  },
  roleOverflow: {
    paddingHorizontal: 8,
    height: 28,
    borderRadius: Module712.radii.xs,
    display: "flex",
    justifyContent: "center",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: Module712.colors.BORDER_SUBTLE
  },
  animation: {
    marginTop: 24,
    borderColor: Module712.colors.BORDER_SUBTLE,
    borderWidth: 2,
    borderRadius: Module712.radii.sm,
    padding: 12,
    display: "flex",
    flexDirection: "row",
    alignItems: "center"
  },
  wave: {
    transform: [{
      translateX: 24
    }, {
      rotate: "5deg"
    }]
  },
  animationText: {
    flexGrow: 1,
    marginLeft: 8
  },
  getStartedButton: {
    marginTop: 24
  }
});
const __initData = {
  code: "function GuildOnboardingCompletedTsx1(){const{withSequence,withTiming,withDelay,ANIMATION_DURATION,Easing,useReducedMotion}=this.__closure;const opacity=withSequence(withTiming(0,{duration:0}),withDelay(ANIMATION_DURATION,withTiming(0.5,{duration:ANIMATION_DURATION})),withTiming(1,{duration:ANIMATION_DURATION,easing:Easing.out(Easing.ease)}));const scale=withSequence(withTiming(1,{duration:0}),withDelay(ANIMATION_DURATION,withTiming(1.5,{duration:ANIMATION_DURATION,easing:Easing.out(Easing.ease)})),withTiming(1,{duration:useReducedMotion?1:ANIMATION_DURATION,easing:Easing.out(Easing.ease)}));const rawRotation=withSequence(withTiming('0deg',{duration:0}),withDelay(ANIMATION_DURATION,withTiming('-2deg',{duration:ANIMATION_DURATION})),withTiming('-5deg',{duration:ANIMATION_DURATION}));return{opacity:opacity,transform:[{rotate:rawRotation},{scale:scale}]};}"
};
export default function GuildOnboardingCompleted(props) {
  let stateFromStores, c14909_6, stateFromStoresArray, c14909_8, allSelectedRoleIds, isScreenReaderEnabled, ref, stateFromStores2;
  const { guildId, prompts, completeOnboarding, onClose } = props;
  stateFromStores = void 0;
  c14909_6 = void 0;
  stateFromStoresArray = void 0;
  c14909_8 = void 0;
  allSelectedRoleIds = void 0;
  isScreenReaderEnabled = void 0;
  ref = void 0;
  stateFromStores2 = void 0;
  const styles = useStyles();
  const navigation = useNavigation();
  const stateFromStores3 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
  const guildRoleMemberCounts = useGuildRoleMemberCounts(guildId);
  c14909_6 = guildRoleMemberCounts;
  const r28 = {
    backgroundColor: useProfileThemeValues(useThemeContext().theme)?.rolePillBackgroundColor
  };
  const uri = stateFromStores != null ? AvatarUtils.getGuildSplashURL({
    id: stateFromStores.id,
    splash: stateFromStores.splash,
    size: 400 * getDevicePixelRatio_native()
  }) : null;
  stateFromStoresArray = useStateFromStoresArray([GuildOnboardingPromptsStore], () => GuildOnboardingPromptsStore.getOnboardingResponses(guildId), [guildId]);
  const r85 = prompts.map((prompt) => prompt.options).flat().filter((item) => stateFromStoresArray.includes(item.id));
  c14909_8 = r85;
  const memo = useMemo(() => {
    const allSelectedRoleIds2 = c14909_8.map((item) => item.roleIds).flat().filter(isNotNullish);
    const r23 = c14909_6 != null;
    let numSharedRoleMembers = 0;
    if (r23) {
      const r26 = allSelectedRoleIds2.length > 0;
      numSharedRoleMembers = 0;
      if (r26) {
        const r28 = Math;
        numSharedRoleMembers = r28.max.apply(r28, [...allSelectedRoleIds2.map((item) => {
          let r5 = c14909_6[item];
          if (r5 == null) {
            r5 = 0;
          }
          return r5;
        })]);
      }
    }
    return {
      numSharedRoleMembers,
      allSelectedRoleIds: allSelectedRoleIds2
    };
  }, [guildRoleMemberCounts, r85]);
  const numSharedRoleMembers = memo.numSharedRoleMembers;
  allSelectedRoleIds = memo.allSelectedRoleIds;
  const stateFromStoresArray2 = useStateFromStoresArray([GuildRoleStore], () => GuildRoleStore.getManyRoles(guildId, allSelectedRoleIds), [allSelectedRoleIds, guildId]);
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => null
    });
  }, [navigation]);
  isScreenReaderEnabled = useIsScreenReaderEnabled();
  ref = useRef(false);
  useEffect(() => {
    if (isScreenReaderEnabled) {
      if (!ref.current) {
        ref.current = true;
        completeOnboarding();
      }
      return void 0;
    }
    let c25491_0 = setTimeout(() => {
      if (!ref.current) {
        ref.current = true;
        completeOnboarding();
      }
      onClose();
    }, 3600);
    return () => clearTimeout(c25491_0);
  }, [completeOnboarding, onClose, isScreenReaderEnabled]);
  stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const k = function k() {
    const opacity = _ReanimatedRexport.withSequence(_timing.withTiming(0, {
      duration: 0
    }), _ReanimatedRexport.withDelay(ANIMATION_DURATION, _timing.withTiming(0.5, {
      duration: ANIMATION_DURATION
    })), _timing.withTiming(1, {
      duration: ANIMATION_DURATION,
      easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
    }));
    const scale = _ReanimatedRexport.withSequence(_timing.withTiming(1, {
      duration: 0
    }), _ReanimatedRexport.withDelay(ANIMATION_DURATION, _timing.withTiming(1.5, {
      duration: ANIMATION_DURATION,
      easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
    })), _timing.withTiming(1, {
      duration: stateFromStores2 ? 1 : ANIMATION_DURATION,
      easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
    }));
    return {
      opacity,
      transform: [{
        rotate: _ReanimatedRexport.withSequence(_timing.withTiming("0deg", {
          duration: 0
        }), _ReanimatedRexport.withDelay(ANIMATION_DURATION, _timing.withTiming("-2deg", {
          duration: ANIMATION_DURATION
        })), _timing.withTiming("-5deg", {
          duration: ANIMATION_DURATION
        }))
      }, {
        scale
      }]
    };
  };
  k.__closure = {
    withSequence: _ReanimatedRexport.withSequence,
    withTiming: _timing.withTiming,
    withDelay: _ReanimatedRexport.withDelay,
    ANIMATION_DURATION,
    Easing: _ReanimatedRexport.Easing,
    useReducedMotion: stateFromStores2
  };
  k.__workletHash = 8282245217026;
  k.__initData = __initData;
  const animatedStyle = useAnimatedStyle(k);
  if (stateFromStores3 != null && stateFromStores != null) {
    const r142 = stateFromStoresArray2.length - 3;
    const r155 = [uri != null ? <FastImage source={{
      uri
    }} style={styles.backgroundImage} /> : null, ,];
    const style = [styles.container, uri == null ? styles.containerWithoutSplash : null];
    const r169 = uri == null;
    let color = "text-overlay-light";
    const r179 = [<Text style={styles.title} accessibilityRole="header" variant="heading-xxl/extrabold" color={r169 ? "mobile-text-heading-primary" : "text-overlay-light"}>
      {intl.string(t.PFWIYe)}
    </Text>, , , ,];
    if (uri == null) {
      color = "text-muted";
    }
    r179[1] = <Text style={styles.subtitle} accessibilityRole="header" variant="text-md/medium" color={color}>
      {intl.string(t.og4NNr)}
    </Text>;
    r179[2] = <View style={styles.card}>
      <Avatar size={AvatarSizes.XXLARGE} user={stateFromStores3} guildId={guildId} animate={false} />
      <Text style={styles.username} variant="heading-xl/semibold" color="mobile-text-heading-primary">{stateFromStores3.username}</Text>
      {numSharedRoleMembers > 0 ? <Text style={styles.rolesHeader} variant="text-sm/normal" color="text-muted">
        {intl.format(t.l1Jc1n, {
          numSharedRoleMembers
        })}
      </Text> : null}
      <View style={styles.roles}>
        {stateFromStoresArray2.slice(0, 3).map((item) => <View key={item.id} style={styles.role}>
          <RoleItem role={item} guildId={stateFromStores.id} disableInteraction />
        </View>)}
        {0 < r142 ? <View style={[styles.roleOverflow, r28]}>
          <Text variant="heading-deprecated-12/semibold" color="mobile-text-heading-primary">
            {`+${r142}`}
          </Text>
        </View> : null}
      </View>
      <ReanimatedRexport.View style={[styles.animation, animatedStyle]}>
        <GuildIcon guild={stateFromStores} size={GuildIconSizes.LARGE} />
        <View style={styles.animationText}>
          <Text variant="text-sm/medium" color="mobile-text-heading-primary">
            {intl.format(t.FXREhf, {
              guildName: stateFromStores.name
            })}
          </Text>
          <Text variant="text-xs/normal" color="text-muted">
            {`${Module3771().format("LL")}`}
          </Text>
        </View>
        <FastImage source={Module5569} style={styles.wave} />
      </ReanimatedRexport.View>
    </View>;
    r179[3] = isScreenReaderEnabled ? <View style={styles.getStartedButton}>
      <Button variant="primary" size="md" grow text={intl.string(t.LhlgY9)} onPress={onClose} />
    </View> : null;
    r155[1] = <SafeAreaPaddingView bottom style={style}>
      <View>{r179}</View>
    </SafeAreaPaddingView>;
    return <View style={styles.screen}>{r155}</View>;
  }
  return null;
};