// Metro module 10986 (f10987).
import { useState, useMemo } from "react";
import GuildTemplateStore from "../GuildTemplateStore";
import { UPLOAD_MEDIUM_SIZE } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { NAV_BAR_HEIGHT } from "../../../design/components/Navigator/native/NavigatorConstants.native";
import { useStateFromStores } from "../../../_bundle/Module589";
import { getGuildNameSuggestion } from "../../../utils/GuildUtils";
import useTrackCreateGuildViewed from "../useTrackCreateGuildViewed";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import AcceptGuildTemplate from "../../create_guild/native/AcceptGuildTemplate";
import UploadUtils from "../../../utils/native/UploadUtils";
import AcceptGuildTemplateActionCreators from "../AcceptGuildTemplateActionCreators";
import GuildTemplateActionCreators from "./GuildTemplateActionCreators";
import { getHeaderCloseButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
import { Navigator } from "../../../design/components/Navigator/native/Navigator.native";
let useStyles, initialRouteName;
const ConnectedAcceptGuildTemplate = function ConnectedAcceptGuildTemplate(props) {
  let state, setState, state2, setState2, setState3;
  const code = props.code;
  state = void 0;
  setState = void 0;
  state2 = void 0;
  setState2 = void 0;
  setState3 = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([GuildTemplateStore], () => GuildTemplateStore.getGuildTemplate(code));
  [state, setState] = useState(getGuildNameSuggestion());
  [state2, setState2] = useState(null);
  let errors;
  [errors, setState3] = useState(null);
  useTrackCreateGuildViewed(stateFromStores);
  return <SafeAreaPaddingView top style={styles.container}>
    <AcceptGuildTemplate code={code} guildTemplate={stateFromStores} name={state} setName={(a0) => setState(a0)} icon={state2} errors={errors} chooseIcon={async () => {
      let c26898_1;
      c26898_1 = void 0;
      let c30326_0 = (await UploadUtils.openImagePicker({
        size: UPLOAD_MEDIUM_SIZE
      })).base64;
      if (c30326_0 != null) {
        (0, setState2)(c30326_0);
      }
    }} createServer={function createServer() {
      if (stateFromStores != null) {
        AcceptGuildTemplateActionCreators.acceptGuildTemplate(stateFromStores.code, state, state2).then(() => GuildTemplateActionCreators.hideModal(), (a0) => setState3(a0));
      }
    }} />
  </SafeAreaPaddingView>;
};
useStyles = createStyles({
  container: {
    marginTop: NAV_BAR_HEIGHT
  }
});
initialRouteName = "ACCEPT_GUILD_TEMPLATE";
export default function AcceptGuildTemplateModal(props) {
  const code2 = props.code;
  return <Navigator initialRouteName={initialRouteName} screens={useMemo(() => {
    let c26899_0 = {
      code: code2
    };
    const r9 = {};
    r9[initialRouteName] = {
      title: "",
      fullscreen: true,
      headerLeft: getHeaderCloseButton(() => GuildTemplateActionCreators.hideModal()),
      render: () => <ConnectedAcceptGuildTemplate {...c26899_0} />
    };
    return r9;
  }, [code2])} />;
};