// Metro module 15177 (f15178).
import { useMemo } from "react";
import { View } from "react-native";
import GuildMemberStore from "../../../stores/GuildMemberStore";
import GuildOnboardingHomeSettingsStore from "../GuildOnboardingHomeSettingsStore";
import GuildOnboardingMemberActionStore from "../GuildOnboardingMemberActionStore";
import { StaticChannelRoute } from "../../channel/ChannelConstants";
import { GuildMemberFlags } from "../../guild_member/GuildMemberConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import Module4611 from "../../../_bundle/Module4611";
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import { hasFlag } from "../../../_bundle/Module1384";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { transitionTo } from "../../routing/router_utils";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { Icon } from "../../../design/void/native";
import Module10737 from "../../../_bundle/Module10737";
let useStyles;
const ProgressBar = function ProgressBar(props) {
  const percent = props.percent;
  const styles = useStyles();
  return <View style={styles.progressBackground}>
    <Module4611 style={[styles.progressForeground, {
      width: `${percent}%`
    }]} colors={["rgba(103, 203, 134, 1)", "rgba(59, 165, 92, 1)"]} useAngle angle={-90} />
  </View>;
};
useStyles = createStyles({
  container: {
    padding: 16
  },
  horizontal: {
    flexDirection: "row",
    alignItems: "center"
  },
  spaceBetween: {
    justifyContent: "space-between"
  },
  spaceBelow: {
    marginBottom: 8
  },
  progressBackground: {
    borderRadius: Module712.radii.round,
    height: 8,
    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL
  },
  progressForeground: {
    backgroundColor: Module712.colors.STATUS_POSITIVE_BACKGROUND,
    borderRadius: Module712.radii.round,
    height: 8
  }
});
export function NewMemberActionsProgress(props) {
  let stateFromStores2;
  const guildId = props.guildId;
  stateFromStores2 = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([GuildOnboardingHomeSettingsStore], () => GuildOnboardingHomeSettingsStore.getNewMemberActions(guildId), [guildId]);
  stateFromStores2 = useStateFromStores([GuildOnboardingMemberActionStore], () => GuildOnboardingMemberActionStore.getCompletedActions(guildId));
  const stateFromStores3 = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getSelfMember(guildId));
  let r14 = stateFromStores?.length;
  if (r14 == null) {
    r14 = 0;
  }
  const memo = useMemo(() => {
    if (stateFromStores != null && stateFromStores2 != null) {
      let c27958_0 = 0;
      stateFromStores.forEach((stateFromStore) => {
        if (stateFromStores2[stateFromStore.channelId] != null) {
          c27958_0 = c27958_0 + 1;
        }
      });
      return c27958_0;
    }
    return 0;
  }, [stateFromStores2, stateFromStores]);
  let r50 = stateFromStores3?.flags;
  if (r50 == null) {
    r50 = 0;
  }
  return hasFlag(r50, GuildMemberFlags.COMPLETED_HOME_ACTIONS) ? null : r14 !== 0 ? memo + r14 !== 0 ? <PressableOpacity accessibilityRole="button" activeOpacity={0.4} style={styles.container} onPress={function onPress() {
    transitionTo(StaticChannelRoute.GUILD_HOME);
  }}>
    <View style={[styles.horizontal, styles.spaceBetween, styles.spaceBelow]}>
      <Text variant="text-xs/bold" color="mobile-text-heading-primary">
        {intl.string(t.LhlgY9)}
      </Text>
      <View style={styles.horizontal}>
        <Text variant="text-xs/bold" color="mobile-text-heading-primary">{memo}</Text>
        <Text variant="text-xs/medium" color="text-default">/</Text>
        <Text variant="text-xs/bold" color="mobile-text-heading-primary">{r14}</Text>
        <Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module10737} />
      </View>
    </View>
    <ProgressBar percent={memo / r14 * 100 + 3} />
  </PressableOpacity> : null : null;
}