// Metro module 10398 (f10399).
import { useState } from "react";
import { ImageBackground, View } from "react-native";
import ChannelStore from "../../../../stores/ChannelStore";
import GuildChannelStore, { GUILD_SELECTABLE_CHANNELS_KEY } from "../../../../stores/GuildChannelStore";
import GuildStore from "../../../../stores/GuildStore";
import PermissionStore from "../../../../stores/PermissionStore";
import SortedGuildStore from "../../../../stores/SortedGuildStore";
import { AbortCodes, ChannelTypes, Permissions } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useBottomSheetRef } from "../../../../design/components/Sheet/native/useBottomSheetRef";
import useTheme from "../../../../hooks/useTheme";
import { useStateFromStoresObject } from "../../../../_bundle/Module589";
import useChannelName from "../../../channel/useChannelName";
import useMountEffect from "../../../../hooks/useMountEffect";
import { isThemeDark } from "../../../../design/shared";
import Module10399 from "../../../../_bundle/Module10399";
import Module10400 from "../../../../_bundle/Module10400";
import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
import { BottomSheetScrollView } from "../../../../_bundle/Module5245";
import GuildIcon, { GuildIconSizes } from "../../../guild/native/GuildIcon";
import { Icon } from "../../../../design/void/native";
import { getChannelIcon } from "../../../../utils/native/ChannelUtils";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { Stack } from "../../../../design/components/Stack/native/Stack.native";
import { TableRowGroup } from "../../../../design/components/TableRow/native/TableRowGroup.native";
import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
import openChannelPicker from "../../../channel/native/openChannelPicker";
import { FormHint } from "../../../../design/void/Form/native/index";
import { ButtonGroup } from "../../../../design/components/ButtonGroup/native/ButtonGroup.native";
import { Button } from "../../../../design/components/Button/native/Button.native";
import ChannelFollowerActionCreators from "../../../../actions/ChannelFollowerActionCreators";
import { ActionSheetHeaderBar } from "../../../../design/components/Sheet/native/ActionSheetHeaderBar.native";
const useStyles = createStyles({
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "stretch",
    paddingHorizontal: 16,
    paddingVertical: 24
  },
  header: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    height: 96
  },
  headerGuildIcon: {
    width: 40,
    marginRight: 16
  },
  headerChannelContainer: {
    borderRadius: Module712.radii.xs,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    height: 32
  },
  headerChannel: {
    flex: 1,
    flexDirection: "row",
    minWidth: 160,
    paddingHorizontal: 8,
    paddingVertical: 6,
    borderRadius: Module712.radii.xs,
    backgroundColor: Module712.colors.INTERACTIVE_BACKGROUND_SELECTED
  },
  headerChannelIcon: {
    height: 20,
    width: 20,
    marginRight: 8,
    opacity: 0.6
  },
  ctaHeader: {
    flex: 1,
    textAlign: "center",
    marginBottom: 8
  },
  ctaSubhead: {
    flex: 1,
    textAlign: "center",
    marginBottom: 8
  },
  channelIcon: {
    height: 16,
    width: 16,
    opacity: 0.6
  }
});
export default function NewChannelFollower(props) {
  let targetChannel, c17931_10;
  const { sourceGuildId, sourceChannelId, targetGuildId, targetChannelId, reopenActionSheetWithTarget, onCancel, onSuccess } = props;
  targetChannel = void 0;
  c17931_10 = void 0;
  const styles = useStyles();
  const [loading, setState] = useState(false);
  const [state, setState2] = useState(null);
  const bottomSheetRef2 = useBottomSheetRef();
  const { bottomSheetRef, bottomSheetClose } = bottomSheetRef2;
  const theme = useTheme();
  const stateFromStoresObject = useStateFromStoresObject([GuildStore], () => ({
    sourceGuild: GuildStore.getGuild(sourceGuildId),
    targetGuild: GuildStore.getGuild(targetGuildId)
  }));
  const { sourceGuild, targetGuild } = stateFromStoresObject;
  const stateFromStoresObject2 = useStateFromStoresObject([ChannelStore], () => ({
    sourceChannel: ChannelStore.getChannel(sourceChannelId),
    targetChannel: ChannelStore.getChannel(targetChannelId)
  }));
  const sourceChannel = stateFromStoresObject2.sourceChannel;
  targetChannel = stateFromStoresObject2.targetChannel;
  const channelName2 = useChannelName(sourceChannel);
  const channelName = useChannelName(targetChannel);
  const r73 = targetGuildId != null && targetChannelId != null;
  c17931_10 = r73;
  useMountEffect(() => {
    if (c17931_10) {
      const current = bottomSheetRef.current;
      if (current != null) {
        current.expandActionSheet();
      }
    }
  });
  const r127 = [<ImageBackground source={isThemeDark(theme) ? Module10399 : Module10400} style={styles.header}>
    <View style={styles.header}>
      <GuildIcon style={styles.headerGuildIcon} guild={sourceGuild} />
      <View style={styles.headerChannelContainer}>
        <View style={styles.headerChannel}>
          <Icon size={Icon.Sizes.CUSTOM} source={sourceChannel != null ? getChannelIcon(sourceChannel) : null} style={styles.headerChannelIcon} />
          <Text lineClamp={1} variant="text-sm/medium">{channelName2}</Text>
        </View>
      </View>
    </View>
  </ImageBackground>, ,];
  const r145 = [<Text style={styles.ctaHeader} variant="heading-lg/semibold" color="mobile-text-heading-primary">
    {intl.string(t.mvPFbA)}
  </Text>, <Text style={styles.ctaSubhead} variant="text-sm/medium" color="text-default">
    {intl.string(t.kbpkxJ)}
  </Text>, , , , ,];
  const r202 = [<TableRowGroup title={intl.string(t.xFn72s)} hasIcons>
    <TableRow label={targetGuild != null ? targetGuild.name : intl.string(t.XqMe3N)} icon={targetGuild != null ? <GuildIcon guild={targetGuild} size={GuildIconSizes.XSMALL} /> : null} arrow onPress={function onPress() {
      const r19 = import("../../../../components_native/common/ItemSelectorActionSheet");
      const r28 = {
        title: intl.string(t.etZ9tX),
        items: SortedGuildStore.getFlattenedGuildIds().reduce((acc, item) => {
          const guild = GuildStore.getGuild(item);
          if (guild != null && PermissionStore.can(Permissions.MANAGE_WEBHOOKS, guild)) {
            acc.push({
              label: guild.name,
              value: guild.id
            });
          }
          return acc;
        }, new Array()),
        selectedItem: null,
        onItemSelect: null,
        onClose: null,
        hasIcons: false
      };
      let selectedItem = targetGuildId;
      if (targetGuildId == null) {
        selectedItem = void 0;
      }
      r28.selectedItem = selectedItem;
      r28.onItemSelect = (a0) => {
        reopenActionSheetWithTarget(a0, GuildChannelStore.getDefaultChannel(a0)?.id);
      };
      r28.onClose = () => {
        reopenActionSheetWithTarget(targetGuildId, targetChannelId);
      };
      ActionSheetActionCreators.openLazy(r19, "NewChannelFollowerGuildPicker", r28);
    }} />
  </TableRowGroup>, ,];
  const props2 = {
    title: intl.string(t.PDn2fR),
    hasIcons: true,
    children: null
  };
  let label = channelName;
  if (label == null) {
    label = intl.string(t.XqMe3N);
  }
  props2.children = <TableRow label={label} disabled={targetGuildId == null} icon={targetChannel != null ? <Icon size={Icon.Sizes.CUSTOM} source={getChannelIcon(targetChannel)} style={styles.channelIcon} /> : null} arrow onPress={function onPress() {
    if (targetGuildId != null) {
      let selectedChannel = targetChannel;
      if (targetChannel == null) {
        selectedChannel = null;
      }
      openChannelPicker({
        guildId: targetGuildId,
        selectedChannel,
        channelType: GUILD_SELECTABLE_CHANNELS_KEY,
        filterFn: ({ channel }) => channel.type === ChannelTypes.GUILD_TEXT && PermissionStore.can(Permissions.MANAGE_WEBHOOKS, channel),
        onSelect: (a0) => {
          reopenActionSheetWithTarget(targetGuildId, a0.id);
        },
        onClose: () => {
          reopenActionSheetWithTarget(targetGuildId, targetChannelId);
        }
      });
    }
  }} />;
  r202[1] = <TableRowGroup {...props2} />;
  r145[2] = <Stack spacing={16}>{r202}</Stack>;
  r145[3] = <FormHint inset>
    {intl.string(t.Z0quyN)}
  </FormHint>;
  r145[4] = state != null ? <FormHint inset>{state}</FormHint> : null;
  r145[5] = <ButtonGroup>
    <Button text={intl.string(t["3aOv+h"])} disabled={!r73} loading={loading} onPress={function onPress() {
      if (targetChannelId != null) {
        setState(true);
        ChannelFollowerActionCreators.createChannelFollower(targetChannelId, sourceChannelId).then(onSuccess).catch((error) => {
          setState(false);
          if (error.body.code === AbortCodes.TOO_MANY_WEBHOOKS) {
            setState2(intl.string(t["1eZ4aB"]));
          } else {
            setState2(intl.string(t.LgwhuN));
          }
        });
      }
    }} />
    <Button text={intl.string(t["ETE/oC"])} variant="secondary" onPress={onCancel} />
  </ButtonGroup>;
  r127[1] = <View style={styles.container}>{r145}</View>;
  return <BottomSheet handleDisabled startExpanded scrollable ref={bottomSheetRef}>
    <BottomSheetScrollView>{r127}</BottomSheetScrollView>
    <ActionSheetHeaderBar variant="floating" onPress={bottomSheetClose} />
  </BottomSheet>;
};