// Metro module 11040 (f11041).
import { memo, useRef, useState, useCallback } from "react";
import { Image as Image2, ScrollView, View } from "react-native";
import GuildStore from "../../../stores/GuildStore";
import UserStore from "../../../stores/UserStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
import useSafeAreaAvoidingInputs_native from "../../safe_area/useSafeAreaAvoidingInputs.native";
import { useStateFromStores } from "../../../_bundle/Module589";
import GuildActionCreators from "../../../actions/GuildActionCreators";
import Module11041 from "../../../_bundle/Module11041";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import UserUtils from "../../../utils/UserUtils";
import { TextArea } from "../../../design/components/TextInput/native/TextArea.native";
import { Button } from "../../../design/components/Button/native/Button.native";
const useStyles = createStyles({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  iconLabelBlock: {
    marginTop: Module712.space.PX_16,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.lg,
    paddingTop: Module712.space.PX_8,
    paddingBottom: Module712.space.PX_16,
    alignItems: "center"
  },
  iconStyles: {
    height: 1.25 * Module712.space.PX_96
  },
  redText: {
    marginTop: Module712.space.PX_12,
    marginBottom: Module712.space.PX_4,
    color: Module712.colors.TEXT_FEEDBACK_CRITICAL
  },
  blurb: {
    marginVertical: Module712.space.PX_16
  },
  errorText: {
    marginBottom: Module712.space.PX_16
  }
});
const r94 = memo(function KickConfirm(props) {
  let stateFromStores2, ref, setState;
  const { guildId, userId, onKick } = props;
  stateFromStores2 = void 0;
  ref = void 0;
  setState = void 0;
  const styles = useStyles();
  const ref2 = useRef(null);
  const ref3 = useRef(null);
  const insets = useSafeAreaInsetsKeyboardAware_native({
    includeKeyboardHeight: true
  }).insets;
  useSafeAreaAvoidingInputs_native({
    insets,
    inputs: [{
      ref: ref3,
      offset: {
        type: "toBottom"
      }
    }],
    scrollViewRef: ref2
  });
  const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
  stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getUser(userId));
  ref = useRef("");
  let state;
  [state, setState] = useState(() => ({
    kicking: false,
    kickError: false
  }));
  const callback = useCallback(() => {
    if (stateFromStores != null && stateFromStores2 != null) {
      setState({
        kicking: true,
        kickError: false
      });
      GuildActionCreators.kickUser(stateFromStores?.id, stateFromStores2?.id, ref.current).then(onKick).catch(() => {
        setState({
          kicking: false,
          kickError: true
        });
      });
    }
  }, [stateFromStores, onKick, stateFromStores2]);
  return stateFromStores2 != null ? stateFromStores != null ? <ScrollView style={styles.container} ref={ref2} contentContainerStyle={{
    paddingHorizontal: Module712.space.PX_24,
    paddingBottom: insets.bottom
  }}>
    <>
      <View style={styles.iconLabelBlock}>
        <Image2 style={styles.iconStyles} source={Module11041} resizeMode="contain" />
        <Text style={styles.redText} variant="text-md/semibold">
          {intl.formatToPlainString(t["1Ie87p"], {
            user: UserUtils.getName(stateFromStores2)
          })}
        </Text>
        <Text variant="text-lg/bold" color="text-feedback-warning">{stateFromStores.name}</Text>
      </View>
      <Text style={styles.blurb} variant="heading-md/normal" color="text-feedback-warning">
        {intl.format(t["/yH0UT"], {
          user: UserUtils.getName(stateFromStores2)
        })}
      </Text>
      <TextArea ref={ref3} containerStyle={{
        marginBottom: Module712.space.PX_16
      }} label={intl.string(t["+2QEPt"])} maxLength={512} onChange={(event) => {
        ref.current = event;
      }} />
      <View style={{
        marginBottom: Module712.space.PX_16
      }}>
        <Button variant="destructive" text={intl.string(t["3glT6Z"])} onPress={callback} disabled={state.kicking} />
      </View>
      {state.kickError ? <Text style={styles.errorText} variant="text-md/semibold" color="input-text-error-default">
        {intl.format(t.UktD5J, {
          user: UserUtils.getName(stateFromStores2)
        })}
      </Text> : null}
    </>
  </ScrollView> : null : null;
});
export default r94;