// Metro module 9016 (f9017).
import { useState, useRef, useCallback, useEffect } from "react";
import { View } from "react-native";
import { createChannelRecord } from "../../../records/ChannelRecord";
import RelationshipStore from "../../../stores/RelationshipStore";
import UserStore from "../../../stores/UserStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { intl, t } from "../../../intl/index.native";
import { computeChannelName } from "../../channel/useChannelName";
import { fetchChannels } from "../actions";
import { Text } from "../../../design/components/Text/native/Text";
import { LegacyText } from "../../../design/void/native";
import { FormRow } from "../../../design/void/Form/native/index";
const useStyles = createStyles({
  selectorGroup: {
    flexDirection: "column",
    gap: 8
  },
  select: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
    borderRadius: Module712.radii.xs
  },
  label: {
    color: Module712.colors.TEXT_SUBTLE,
    fontWeight: "500"
  },
  error: {
    color: Module712.unsafe_rawColors.RED_400
  }
});
let c5900_13 = "WebhookGuildChannelSelector";
export default function WebhookGuildChannelSelector(props) {
  const { selectedGuildId, selectedChannelId, onChannelChange, error } = props;
  const styles = useStyles();
  const [state, setState] = useState(null);
  const ref = useRef(false);
  const callback = useCallback(() => {
    if (state != null && state.guildId === selectedGuildId) {
      const r21 = import("../../../components_native/common/ItemSelectorActionSheet");
      const r30 = {
        title: intl.string(t["Re/64R"]),
        items: state.channels.map((channel) => ({
          label: computeChannelName(createChannelRecord(channel), UserStore, RelationshipStore),
          value: channel.id
        })),
        onItemSelect: (a0) => {
          onChannelChange(a0);
          ActionSheetActionCreators.hideActionSheet(c5900_13);
        },
        selectedItem: null,
        hasIcons: false
      };
      let selectedItem = selectedChannelId;
      if (selectedChannelId == null) {
        selectedItem = void 0;
      }
      r30.selectedItem = selectedItem;
      ActionSheetActionCreators.openLazy(r21, c5900_13, r30);
    }
  }, [state, onChannelChange, selectedChannelId, selectedGuildId]);
  useEffect(() => {
    let _updateChannels2 = function _updateChannels() {
      const r9 = async (c31484_0) => {
        let c31484_2;
        let env31986;
        c31484_2 = void 0;
        const r9 = env31986 = {};
        let c31484_1 = r9;
        env31986[0] = c31484_0;
        env31986[1] = void 0;
        env31986[1] = await fetchChannels(c31484_0);
        if (selectedGuildId === env31986[0]) {
          env31986[1].sort((a, b) => a.name.localeCompare(b.name));
          (0, setState)({
            guildId: env31986[0],
            channels: env31986[1]
          });
          ref.current = true;
        }
      };
      _updateChannels2 = r9;
      return r9.apply(this, arguments);
    };
    setState(null);
    if (selectedGuildId == null) {
      onChannelChange(null);
    } else {
      (function updateChannels(a0) {
        return _updateChannels2.apply(this, arguments);
      })(selectedGuildId);
    }
  }, [onChannelChange, selectedGuildId]);
  useEffect(() => {
    if (ref.current) {
      if (state == null) {
        if (selectedChannelId != null) {
          onChannelChange(null);
        }
      } else if (!state.channels.some((channel) => channel.id === selectedChannelId)) {
        onChannelChange(null);
      }
    }
  }, [state, onChannelChange, selectedChannelId, selectedGuildId]);
  if (selectedGuildId == null) {
    return null;
  }
  const r38 = state == null ? void 0 : state.channels.find((channel) => channel.id === selectedChannelId);
  const r60 = [<Text variant="eyebrow" color="text-default">
    {intl.string(t["8qKd+J"])}
  </Text>, error != null ? error !== "" ? <LegacyText style={styles.error}>{error}</LegacyText> : null : null, , ,];
  let label = r38?.name;
  if (label == null) {
    label = intl.string(t["Re/64R"]);
  }
  r60[2] = <FormRow label={label} disabled={selectedGuildId == null} trailing={<FormRow.Arrow />} DEPRECATED_style={styles.select} onPress={callback} />;
  r60[3] = <LegacyText style={styles.label}>
    {intl.string(t.kQXMfN)}
  </LegacyText>;
  return <View style={styles.selectorGroup}>{r60}</View>;
};
export { useStyles };