// Metro module 15677 (f15678).
import { PureComponent } from "react";
import { GUILD_SELECTABLE_CHANNELS_KEY } from "../../../stores/GuildChannelStore";
import PermissionStore from "../../../stores/PermissionStore";
import RelationshipStore from "../../../stores/RelationshipStore";
import UserStore from "../../../stores/UserStore";
import { Endpoints, NON_USER_BOT_DISCRIMINATOR, Permissions, WebhookTypes } from "../../../Constants";
import { createLegacyClassComponentStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { ThemeContext } from "../../../_bundle/Module3901";
import { isAndroid } from "../../../utils/PlatformUtils";
import PressableNavigatorModalIcon from "../../main_tabs_v2/native/shared_components/navigator/PressableNavigatorModalIcon";
import { HeaderSubmittingIndicator } from "../../../design/components/Navigator/native/NavigatorHeader.native";
import { HeaderTextButton } from "../../main_tabs_v2/native/shared_components/HeaderShared";
import { intl, t } from "../../../intl/index.native";
import WebhooksActionCreators from "../../../actions/WebhooksActionCreators";
import openChannelPicker from "../../channel/native/openChannelPicker";
import { getAPIBaseURL } from "../../../_bundle/sendRequest";
import { copy } from "../../../utils/ClipboardUtils.native";
import AlertActionCreators from "../../../actions/native/AlertActionCreators";
import Alert from "../../../components_native/common/Alert";
import { Text } from "../../../design/components/Text/native/Text";
import { Form } from "../../../design/void/Form/native/index";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import IconLabelBlock from "../../../components_native/common/IconLabelBlock";
import { getUserAvatarURL } from "../../../utils/AvatarUtils";
import { TextInput } from "../../../design/components/TextInput/native/TextInput.native";
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import { computeChannelName } from "../../channel/useChannelName";
import { Icon } from "../../../design/void/native";
import { getChannelIcon } from "../../../utils/native/ChannelUtils";
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
import { NavScrim } from "../../../design/components/Navigator/native/NavScrim.android";
const styles = createLegacyClassComponentStyles({
  form: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
  },
  row: {
    padding: Module712.modules.mobile.TABLE_ROW_PADDING
  },
  channelIcon: {
    height: 16,
    width: 16,
    opacity: 0.6
  }
});
class EditWebhook extends PureComponent {
  static contextType = ThemeContext;
  state = {
    avatar: this.props.avatar,
    name: this.props.name,
    channel: this.props.channel,
    hasChanges: false,
    submitting: false,
    copied: false
  };
  handleSave = () => {
    if (this.state.hasChanges) {
      const state = this.state;
      const { avatar, name, channel: channel2 } = state;
      const props = this.props;
      const { guildId, webhookId: webhookId2, navigation: navigation3 } = props;
      const r15 = {
        name,
        channel_id: channel2.id,
        avatar
      };
      this.setState({
        submitting: true
      });
      WebhooksActionCreators.update(guildId, webhookId2, r15).then(() => {
        navigation3.pop();
      }).catch((error) => {
        this.setState({
          errors: error.body,
          submitting: false
        });
      });
    }
  };
  handleGuildIconUpload = (a0) => {
    const avatar = this.props.avatar;
    if (a0 !== avatar) {
      this.setState({
        hasChanges: true,
        avatar: a0
      });
    } else {
      this.setState({
        hasChanges: false,
        avatar
      });
    }
  };
  handleNameChange = (a0) => {
    const name = this.props.name;
    if (a0 !== name) {
      this.setState({
        hasChanges: true,
        name: a0
      });
    } else {
      this.setState({
        hasChanges: false,
        name
      });
    }
  };
  handleChannelChange = () => {
    const channel = this.props.channel;
    openChannelPicker({
      guildId: this.props.guildId,
      channelType: GUILD_SELECTABLE_CHANNELS_KEY,
      filterFn: (a0) => PermissionStore.can(Permissions.MANAGE_WEBHOOKS, a0.channel),
      selectedChannel: channel,
      onSelect: (a0) => {
        if (a0.id !== channel.id) {
          this.setState({
            hasChanges: true,
            channel: a0
          });
        } else {
          this.setState({
            hasChanges: false,
            channel
          });
        }
      }
    });
  };
  handleCopyUrl = () => {
    const props = this.props;
    const { token, webhookId: webhookId2 } = props;
    if (token != null) {
      copy(`${getAPIBaseURL(false)}${Endpoints.WEBHOOK_INTEGRATION(webhookId2, token)}`, () => this.setState({
        copied: true
      }));
    }
  };
  handleConfirmDeleteWebhook = () => {
    const props = this.props;
    const { guildId, webhookId: webhookId2, navigation: navigation4 } = props;
    WebhooksActionCreators.delete(guildId, webhookId2).then(() => {
      navigation4.pop();
    }).catch(() => {
      AlertActionCreators.show({
        title: intl.string(t.N5riYn),
        body: intl.string(t["/4TwKf"])
      });
    });
  };
  handleDeleteWebhook = () => {
    const name = this.props.name;
    AlertActionCreators.show({
      title: intl.formatToPlainString(t.QVFjHh, {
        name
      }),
      body: intl.format(t["rIWe+5"], {
        name
      }),
      cancelText: intl.string(t.gm1Vej),
      confirmText: intl.string(t.p89ACt),
      onConfirm: this.handleConfirmDeleteWebhook,
      confirmColor: Alert.Colors.RED
    });
  };
  handleCancelChanges = () => {
    this.setState({
      avatar: this.props.avatar,
      name: this.props.name,
      channel: this.props.channel,
      hasChanges: false,
      submitting: false,
      copied: false
    });
  };
  componentDidMount() {
    if (isAndroid()) {
      const navigation = this.props.navigation;
      navigation.setOptions({
        headerLeft: () => <PressableNavigatorModalIcon navigation={navigation} type="back" />,
        headerBackVisible: false
      });
    }
  }
  componentDidUpdate(a0, a1) {
    const navigation2 = this.props.navigation;
    const state = this.state;
    const { submitting, hasChanges } = state;
    if (!(submitting === a1.submitting && hasChanges === a1.hasChanges)) {
      if (submitting && !a1.submitting) {
        navigation2.setOptions({
          headerRight: () => <HeaderSubmittingIndicator />,
          headerLeft: () => null,
          headerBackVisible: false
        });
      } else if (hasChanges) {
        navigation2.setOptions({
          headerRight: () => <HeaderTextButton onPress={this.handleSave} label={intl.string(t["R3BPH+"])} />,
          headerLeft: () => <HeaderTextButton onPress={this.handleCancelChanges} label={intl.string(t["ETE/oC"])} />,
          headerBackVisible: false
        });
      } else {
        navigation2.setOptions({
          headerRight: void 0,
          headerLeft: () => <PressableNavigatorModalIcon navigation={navigation2} type="back" />,
          headerBackVisible: false
        });
      }
    }
  }
  render() {
    const r23 = styles(this.context);
    const props = this.props;
    const { webhookId, webhookType, token } = props;
    const state = this.state;
    const { avatar, name, channel: channel2, copied, errors } = state;
    const trailing = <Text variant="text-sm/medium" color="text-link">
      {copied ? intl.string(t.t5VZ88) : intl.string(t.OpuAlK)}
    </Text>;
    return <Form style={r23.form} contentContainerStyle={[{
      paddingTop: 16
    }, this.props.contentContainerStyle]}>
      <Stack spacing={Module712.space.PX_24} style={{
        paddingHorizontal: r23.row.padding
      }}>
        {webhookType !== WebhookTypes.CHANNEL_FOLLOWER ? <IconLabelBlock iconProps={{
          onUpload: this.handleGuildIconUpload,
          type: "avatar",
          icon: avatar,
          name,
          makeURL: (a0) => getUserAvatarURL({
            id: webhookId,
            avatar: a0,
            discriminator: NON_USER_BOT_DISCRIMINATOR
          }),
          disabled: false
        }} label={intl.string(t["7+5GQa"])} /> : null}
        <TextInput label={intl.string(t.ukdxuo)} value={name} onChange={this.handleNameChange} errorMessage={errors !== void 0 ? errors.name !== void 0 ? errors.name[0] : void 0 : void 0} />
        <TableRowGroup title={intl.string(t.GK18KJ)} hasIcons>
          <TableRow label={computeChannelName(channel2, UserStore, RelationshipStore)} arrow onPress={this.handleChannelChange} icon={<Icon size={Icon.Sizes.CUSTOM} source={getChannelIcon(channel2)} style={r23.channelIcon} />} />
        </TableRowGroup>
        {token != null ? <TableRowGroup title={intl.string(t.SFdvF1)} hasIcons={false}>
          <TableRow label={`${getAPIBaseURL(false)}${Endpoints.WEBHOOK_INTEGRATION(webhookId, token)}`} onPress={this.handleCopyUrl} trailing={trailing} />
        </TableRowGroup> : null}
        <TableRowGroup hasIcons={false}>
          <TableRow variant="danger" onPress={this.handleDeleteWebhook} label={intl.string(t.oyYWHE)} />
        </TableRowGroup>
      </Stack>
    </Form>;
  }
}
export default function ConnectedEditWebhook(props) {
  return <>
    <EditWebhook navigation={useNavigation()} {...props} />
    <NavScrim />
  </>;
};