// Metro module 9992 (f9993).
import { useState, useEffect } from "react";
import { View } from "react-native";
import GuildStore from "../../../stores/GuildStore";
import { GuildOnboardingTab } from "../GuildOnboardingPromptsConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import useGuildOnboardingAvailable from "../useGuildOnboardingAvailable";
import { useSegmentedControlState } from "../../../design/components/SegmentedControl/native/SegmentedControlState.native";
import { intl, t } from "../../../intl/index.native";
import { SegmentedControl } from "../../../design/components/SegmentedControl/native/SegmentedControl.native";
import CustomizeCommunity from "./CustomizeCommunity";
import ChannelBrowser from "../../opt_in_channels/native/ChannelBrowser";
import ModalStackNavigator from "../../main_tabs_v2/native/utils/ModalStackNavigator";
let useStyles;
const ChannelsAndRolesScreen = function ChannelsAndRolesScreen(props) {
  let c17594_1, state, setState, segmentedControlState;
  const guildId = props.guildId;
  let defaultTab2 = props.defaultTab;
  c17594_1 = void 0;
  state = void 0;
  setState = void 0;
  segmentedControlState = void 0;
  const styles = useStyles();
  const guildOnboardingAvailable = useGuildOnboardingAvailable(useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId)));
  c17594_1 = guildOnboardingAvailable;
  if (defaultTab2 == null) {
    defaultTab2 = guildOnboardingAvailable ? GuildOnboardingTab.CUSTOMIZE : GuildOnboardingTab.BROWSE;
  }
  [state, setState] = useState(defaultTab2);
  segmentedControlState = useSegmentedControlState({
    pageWidth: 0,
    defaultIndex: state,
    onSetActiveIndex: setState,
    items: [intl.string(t.F1VixV), intl.string(t.MWmtj8)].map((item) => ({
      id: item,
      label: item,
      page: null
    }))
  });
  useEffect(() => {
    if (!(c17594_1 || state !== GuildOnboardingTab.CUSTOMIZE)) {
      setState(GuildOnboardingTab.BROWSE);
      segmentedControlState.setActiveIndex(GuildOnboardingTab.BROWSE, false);
    }
  }, [guildOnboardingAvailable, state, segmentedControlState]);
  return <View style={styles.screen}>
    {guildOnboardingAvailable ? <View style={styles.tabBar}>
      <SegmentedControl state={segmentedControlState} />
    </View> : null}
    {state === GuildOnboardingTab.CUSTOMIZE ? <CustomizeCommunity setTab={setState} guildId={guildId} /> : <ChannelBrowser guildId={guildId} />}
  </View>;
};
useStyles = createStyles({
  screen: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  tabBar: {
    paddingHorizontal: Module712.space.PX_12,
    paddingTop: Module712.space.PX_16
  }
});
export default function ChannelsAndRolesModal(props) {
  const { guildId: guildId2, defaultTab } = props;
  return <ModalStackNavigator screenKey="channelAndRolesModal" title={useGuildOnboardingAvailable(useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId2))) ? intl.string(t.h9mGOP) : intl.string(t.et6wav)} render={() => <ChannelsAndRolesScreen guildId={guildId2} defaultTab={defaultTab} />} />;
};