// Metro module 11844 (f11845).
import { useState } from "react";
import { FlatList, Image as Image2, View } from "react-native";
import { HubEmailConnectionSteps } from "../../HubConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import Module11845 from "../../../../_bundle/Module11845";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import fuzzysearch from "../../../../_bundle/fuzzysearch";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import HubActionCreators from "../../../../actions/HubActionCreators";
import { APIError } from "../../../../errors/index";
import { FauxHeader } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
import SearchBarNav from "../../../main_tabs_v2/native/shared_components/SearchBarNav";
import { LegacyText } from "../../../../design/void/native";
import { HubEmailConnectionGuildSelectRow } from "./HubEmailConnectionGuildSelect";
let useStyles;
const EmptyState = function EmptyState() {
  const styles2 = useStyles();
  return <View style={styles2.emptyWrapper}>
    <Image2 style={styles2.emptyStateImage} source={Module11845} />
    <Text style={styles2.emptyStateTitle} variant="text-sm/semibold" color="mobile-text-heading-primary">
      {intl.string(t["6HXiuE"])}
    </Text>
  </View>;
};
useStyles = createStyles({
  scrollContainer: {
    flex: 1,
    width: "100%",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  fauxHeader: {
    paddingHorizontal: 0
  },
  emptyWrapper: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 64,
    paddingHorizontal: 16
  },
  emptyStateImage: {
    marginBottom: 24
  },
  emptyStateTitle: {
    marginBottom: 4,
    textAlign: "center"
  },
  error: {
    color: Module712.unsafe_rawColors.RED_400,
    alignSelf: "center",
    fontSize: 14,
    marginBottom: 8
  }
});
export default function HubEmailConnectionGuildSelectSearch(props) {
  let anyErrorMessage;
  const { guildsInfo, email, onClose: onClose2 } = props;
  anyErrorMessage = void 0;
  const styles = useStyles();
  const navigation = useNavigation();
  const [state, onChange] = useState("");
  const [state3, setState] = useState(null);
  const [state2, setState2] = useState(false);
  const data = guildsInfo.filter((item) => fuzzysearch(state.toLowerCase(), item.name.toLowerCase()));
  const bottom = useSafeAreaInsets_native().bottom;
  anyErrorMessage = state3 == null ? void 0 : state3.getAnyErrorMessage();
  return <>
    <FauxHeader style={styles.fauxHeader}>
      <SearchBarNav placeholder={intl.string(t.nL2wKD)} onChange={onChange} onClose={() => {
        navigation.pop();
      }} />
    </FauxHeader>
    <FlatList keyboardShouldPersistTaps="always" data={data} ListHeaderComponent={() => anyErrorMessage != null ? anyErrorMessage !== "" ? <LegacyText style={styles.error}>{anyErrorMessage}</LegacyText> : null : null} renderItem={({ item }) => {
      const id = item.id;
      return <HubEmailConnectionGuildSelectRow signup={async () => {
        let c30468_2;
        let c30468_3 = 0;
        let c31647_0;
        L10: {
          try {
            setState(null);
            setState2(true);
            c30468_3 = 2;
            await HubActionCreators.sendVerificationEmail(email, true, id);
            navigation.push(HubEmailConnectionSteps.VERIFY_PIN, {
              email,
              onClose: onClose2,
              guildId: id
            });
            c30468_3 = 1;
            c30468_3 = 0;
            (0, setState2)(false);
          } catch ($e) {
            const r33 = $e;
            let r7 = r33;
            c30468_2 = r33;
            let r34 = c30468_3;
            if (r34 !== 0) {
              while (true) {
                if (r34 === 1) {
                  try {
                    const r108 = c30468_2;
                    c30468_3 = 0;
                    (0, setState2)(false);
                    throw r108;
                  } catch (r106) {
                    r7 = r106;
                    c30468_2 = r106;
                    r34 = c30468_3;
                    if (r34 === 0) {
                      break;
                    }
                  }
                } else {
                  try {
                    const r85 = c30468_2;
                    c30468_3 = 1;
                    c31647_0 = r85;
                    setState(new APIError(c31647_0));
                    c30468_3 = 0;
                    (0, setState2)(false);
                    break L10;
                  } catch (r82) {
                    r7 = r82;
                    c30468_2 = r82;
                    r34 = c30468_3;
                    if (r34 === 0) {
                      break;
                    }
                  }
                }
              }
            }
            throw r7;
          }
        }
      }} guildInfo={item} loading={state2} />;
    }} keyExtractor={(item) => item.id} ListEmptyComponent={() => <EmptyState />} ItemSeparatorComponent={() => <View style={{
      height: 8
    }} />} style={styles.scrollContainer} contentContainerStyle={{
      paddingBottom: bottom + 16,
      paddingTop: 16
    }} />
  </>;
};