// Metro module 15249 (f15250).
import { useEffect, memo, useState } from "react";
import { View } from "react-native";
import AuthenticationStore from "../../../stores/AuthenticationStore";
import StreamerModeStore from "../../../stores/StreamerModeStore";
import UserStore from "../../../stores/UserStore";
import { MultiAccountTokenStatus } from "../MultiAccountStore";
import { MANAGE_EDIT_TRANSITION_DURATION, MAX_ACCOUNTS, MultiAccountSwitchLocation } from "../Constants";
import { ManageAccountsScreens } from "./ManageAccountsConstants";
import { AnalyticEvents, AuthStates } from "../../../Constants";
import { createNativeStackNavigator } from "../../../_bundle/Module9109";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores, useStateFromStoresObject } from "../../../_bundle/Module589";
import { ButtonColors, Spacer } from "../../../design/void/native";
import AlertActionCreators from "../../../actions/native/AlertActionCreators";
import { intl, t } from "../../../intl/index.native";
import { removeAccount, moveAccount, switchAccount } from "../MultiAccountActionCreators";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { CircleMinusIcon } from "../../../design/components/Icon/native/redesign/generated/CircleMinusIcon";
import { useMultiAccountUsers } from "../useMultiAccount";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import * as _timing from "../../../design/animation/reanimated/timing/timing";
import usePrevious from "../../../hooks/usePrevious";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import SortableListView from "../../../components_native/common/SortableListView";
import AccountSwitcherListItem, { AccountStatusIcon } from "./AccountSwitcherListItem";
import { TransitionGroup } from "../../../_bundle/Module10391";
import FadeInOut from "./FadeInOut";
import { DragIcon } from "../../../design/components/Icon/native/redesign/generated/DragIcon";
import { FormRow } from "../../../design/void/Form/native/index";
import { CirclePlusIcon } from "../../../design/components/Icon/native/redesign/generated/CirclePlusIcon";
import { useAccessibilityNativeStackOptions } from "../../../design/components/Navigator/native/Navigator.native";
import { GenericHeaderTitle, getRenderModalCloseImage, getRenderHeaderTextButton } from "../../main_tabs_v2/native/shared_components/HeaderShared";
import getNavigationModalPresentation from "../../main_tabs_v2/native/utils/getNavigationModalPresentation";
import AccountDisabledOrDeletionScheduled from "../../auth/native/components/AccountDisabledOrDeletionScheduled";
import AuthenticationActionCreators from "../../../actions/AuthenticationActionCreators";
import Login from "../../auth/native/components/Login";
import MFA from "../../auth/native/components/MFA";
let nativeStackNavigator, useStyles, __initData, ManageAccounts;
const RemoveMultiAccountUserButton = function RemoveMultiAccountUserButton(props) {
  let username;
  const user = props.user;
  username = void 0;
  let _handlePressRemove2 = function _handlePressRemove() {
    const r9 = async () => {
      let c30856_0;
      c30856_0 = void 0;
      if (await AlertActionCreators.confirm({
        title: intl.string(t.n0Fbg6),
        body: intl.formatToPlainString(t.phEQmS, {
          username
        }),
        confirmText: intl.string(t.N86XcP),
        confirmColor: ButtonColors.RED,
        cancelText: intl.string(t["ETE/oC"]),
        isDismissable: true
      })) {
        removeAccount(user.id);
      }
    };
    _handlePressRemove2 = r9;
    return r9.apply(this, arguments);
  };
  let r16 = useStateFromStores([StreamerModeStore], () => StreamerModeStore.hidePersonalInformation);
  if (useStateFromStores([UserStore], () => UserStore.getCurrentUser())?.id === user.id) {
    return <Spacer size={21} />;
  }
  username = user.username;
  if (!r16) {
    r16 = user.discriminator === "0";
  }
  if (!r16) {
    username = username + `#${user.discriminator}`;
  }
  return <PressableOpacity accessibilityRole="button" accessibilityLabel={intl.string(t.lSLMaU)} onPress={function handlePressRemove() {
    return _handlePressRemove2.apply(this, arguments);
  }}>
    <CircleMinusIcon color={Module712.colors.ICON_FEEDBACK_CRITICAL} />
  </PressableOpacity>;
};
ManageAccounts = function ManageAccounts(props) {
  let sharedValue, animatedStyle, c21807_7;
  const { isEditing, navigation } = props;
  sharedValue = void 0;
  animatedStyle = void 0;
  c21807_7 = void 0;
  const styles = useStyles();
  const multiAccountUsers = useMultiAccountUsers().multiAccountUsers;
  const currentUserId = useStateFromStoresObject([AuthenticationStore], () => ({
    currentUserId: AuthenticationStore.getId()
  })).currentUserId;
  sharedValue = useSharedValue(0);
  const l = () => ({
    width: _timing.withTiming(sharedValue.get(), {
      duration: MANAGE_EDIT_TRANSITION_DURATION
    })
  });
  l.__closure = {
    withTiming: _timing.withTiming,
    leadingWidth: sharedValue,
    MANAGE_EDIT_TRANSITION_DURATION
  };
  l.__workletHash = 3389178545077;
  l.__initData = __initData;
  animatedStyle = useAnimatedStyle(l);
  c21807_7 = usePrevious(isEditing);
  useEffect(() => {
    if (c21807_7 != null && c21807_7 !== isEditing) {
      sharedValue.set(isEditing ? 37 : 0);
    }
  });
  return <SafeAreaPaddingView style={styles.container} bottom>
    <SortableListView data={multiAccountUsers} onRowMoved={function handleUserMove(event) {
      moveAccount(event.from, event.to);
    }} disableSorting={!isEditing} wrapperStyles={styles.sortableListView} renderRow={(a0, a1) => {
      let r51;
      const props = {
        user: a0,
        onPressUser: isEditing ? null : () => {
          if (!isEditing && a0.id !== currentUserId) {
            if (a0.tokenStatus === MultiAccountTokenStatus.INVALID) {
              navigation.push(AuthStates.LOGIN);
              AnalyticsUtils.track(AnalyticEvents.LOGIN_VIEWED, {
                source: "multi_account_invalid_user"
              });
            } else {
              switchAccount(a0.id, void 0, MultiAccountSwitchLocation.MANAGE_ACCOUNTS_MODAL);
            }
          }
        },
        showActiveAccountLabel: true,
        leading: <TransitionGroup component={ReanimatedRexport.View} transitionEnter transitionLeave style={animatedStyle}>
          {isEditing ? <FadeInOut duration={MANAGE_EDIT_TRANSITION_DURATION}>
            <RemoveMultiAccountUserButton user={a0} />
          </FadeInOut> : isEditing}
        </TransitionGroup>,
        trailing: null,
        delayLongPress: null
      };
      const props2 = {
        duration: MANAGE_EDIT_TRANSITION_DURATION,
        style: styles.trailingIcon,
        children: null
      };
      if (isEditing) {
        props2.children = <DragIcon />;
        r51 = <FadeInOut key="drag" {...props2} />;
      } else {
        props2.children = <AccountStatusIcon user={a0} />;
        r51 = <FadeInOut key="status" {...props2} />;
      }
      props.trailing = <TransitionGroup component={View} transitionEnter transitionLeave transitionAppear style={styles.trailingIconContainer}>{r51}</TransitionGroup>;
      props.delayLongPress = isEditing ? 100 : void 0;
      return <AccountSwitcherListItem key={a1} {...props} />;
    }} keyboardShouldPersistTaps="handled" scrollEventThrottle={16} scrollEnabled footer={<TransitionGroup component={View} transitionEnter transitionLeave transitionAppear>
      {isEditing ? !isEditing : <FadeInOut duration={MANAGE_EDIT_TRANSITION_DURATION}>
        <FormRow leading={<CirclePlusIcon color={Module712.colors.TEXT_LINK} />} label={<FormRow.Label style={styles.addAccountLabel} text={intl.string(t.bPP34Q)} />} onPress={function handlePressAddAccount() {
          if (multiAccountUsers.length >= MAX_ACCOUNTS) {
            AlertActionCreators.show({
              title: intl.string(t.w7wfXi),
              body: intl.formatToPlainString(t.WOyelG, {
                maxNumAccounts: MAX_ACCOUNTS
              }),
              isDismissable: true
            });
          } else {
            navigation.push(AuthStates.LOGIN);
            AnalyticsUtils.track(AnalyticEvents.LOGIN_VIEWED, {
              source: "multi_account_add_account"
            });
          }
        }} />
      </FadeInOut>}
    </TransitionGroup>} />
  </SafeAreaPaddingView>;
};
nativeStackNavigator = createNativeStackNavigator();
useStyles = createStyles({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    flex: 1,
    paddingTop: 16
  },
  sortableListView: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  addAccountLabel: {
    color: Module712.colors.TEXT_LINK
  },
  trailingIconContainer: {
    width: 24,
    height: 24
  },
  trailingIcon: {
    position: "absolute"
  }
});
__initData = {
  code: "function ManageAccountsModalTsx1(){const{withTiming,leadingWidth,MANAGE_EDIT_TRANSITION_DURATION}=this.__closure;return{width:withTiming(leadingWidth.get(),{duration:MANAGE_EDIT_TRANSITION_DURATION})};}"
};
const r78 = memo(function ManageAccountsModal(props) {
  let initialRouteName = props.initialRouteName;
  if (initialRouteName === void 0) {
    initialRouteName = ManageAccountsScreens.MANAGE_ACCOUNTS;
  }
  const accessibilityNativeStackOptions = useAccessibilityNativeStackOptions();
  const [state, setState] = useState(false);
  return <nativeStackNavigator.Navigator initialRouteName={initialRouteName} screenOptions={({ navigation: navigation2 }) => ({
    headerTitle: (a0) => {
      const { children, ...rest } = a0;
      return <GenericHeaderTitle title={a0.children} {...rest} />;
    },
    headerLeft: state ? void 0 : getRenderModalCloseImage(navigation2),
    headerTitleAlign: "center",
    ...accessibilityNativeStackOptions,
    ...getNavigationModalPresentation()
  })}>
    <nativeStackNavigator.Screen name={ManageAccountsScreens.MANAGE_ACCOUNTS} options={() => ({
      title: intl.string(t.WbFpq4),
      headerRight: state ? getRenderHeaderTextButton(intl.string(t.i4jeWR), () => setState(false)) : getRenderHeaderTextButton(intl.string(t.bt75uw), () => setState(true))
    })}>
      {(a0) => <ManageAccounts isEditing={state} navigation={a0.navigation} />}
    </nativeStackNavigator.Screen>
    <nativeStackNavigator.Screen name={ManageAccountsScreens.ACCOUNT_DISABLED_OR_DELETION_SCHEDULED} options={() => ({
      title: intl.string(t.WbFpq4)
    })}>
      {() => <AccountDisabledOrDeletionScheduled handleLogin={(a0, a1, a2) => {
        AuthenticationActionCreators.login({
          login: a0,
          password: a1,
          undelete: a2
        });
      }} onReset={() => {
        AuthenticationActionCreators.loginReset(true);
      }} />}
    </nativeStackNavigator.Screen>
    <nativeStackNavigator.Screen name={ManageAccountsScreens.LOGIN} options={() => ({
      headerShown: false
    })}>
      {() => <Login isMultiAccount />}
    </nativeStackNavigator.Screen>
    <nativeStackNavigator.Screen name={ManageAccountsScreens.MFA} options={() => ({
      headerShown: false
    })}>
      {() => <MFA isMultiAccount />}
    </nativeStackNavigator.Screen>
  </nativeStackNavigator.Navigator>;
});
export default r78;