discord-decomp/modules/guild_themes/native/GuildThemeNuxActionSheet.tsx

// Metro module 15134 (f15135).
import { useState, useRef, useEffect, useCallback } from "react";
import { View } from "react-native";
import SelectedGuildStore from "../../../stores/SelectedGuildStore";
import GuildThemeRuntimeStore from "../GuildThemeRuntimeStore";
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
import Logger from "../../debug/Logger";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { getInitialGuildThemeNuxSelection, saveGuildThemeNuxPreference } from "../GuildThemeNuxUtils";
import { GuildThemeSourcePreference } from "../../../flow/Client";
import { useStateFromStores } from "../../../_bundle/Module589";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { intl, t } from "../../../intl/index.native";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import GuildThemeNuxPreviewGraphic from "./GuildThemeNuxPreviewGraphic";
import { Text } from "../../../design/components/Text/native/Text";
import { TableRadioGroup } from "../../../design/components/TableRow/native/TableRadioGroup.native";
import { TableRadioRow } from "../../../design/components/TableRow/native/TableRadioRow.native";
import { HelpMessage, HelpMessageTypes } from "../../../design/void/native";
import { Button } from "../../../design/components/Button/native/Button.native";
let c10735_12 = "GuildThemeNuxActionSheet";
let c10735_13 = new Logger("GuildThemeNuxActionSheet");
const useStyles = createStyles({
  container: {
    padding: Module712.space.PX_16,
    paddingTop: Module712.space.PX_8,
    paddingBottom: 0
  },
  title: {
    textAlign: "center",
    marginBottom: Module712.space.PX_8
  },
  description: {
    textAlign: "center",
    marginBottom: Module712.space.PX_24
  },
  options: {
    marginBottom: Module712.space.PX_12
  },
  warning: {
    marginBottom: Module712.space.PX_12
  },
  footer: {
    gap: Module712.space.PX_8
  }
});
export default function GuildThemeNuxActionSheet(props) {
  let callback;
  const { guildId, markAsDismissed } = props;
  callback = void 0;
  const styles = useStyles();
  const [value, setState] = useState(getInitialGuildThemeNuxSelection);
  const [state, setState2] = useState(null);
  const [loading, setState3] = useState(false);
  const ref = useRef(false);
  const isPersonal = value === GuildThemeSourcePreference.PERSONAL;
  let c21699_6 = isPersonal;
  const stateFromStores = useStateFromStores([SelectedGuildStore], () => SelectedGuildStore.getGuildId());
  const stateFromStores2 = useStateFromStores([GuildThemeRuntimeStore], () => {
    const guildThemeSnapshot = GuildThemeRuntimeStore.getGuildThemeSnapshot(guildId);
    const r1 = guildThemeSnapshot != null;
    let r8 = null;
    if (r1) {
      const enabled = guildThemeSnapshot.enabled;
      r8 = null;
      if (enabled) {
        let themeSettings = guildThemeSnapshot.themeSettings;
        if (themeSettings == null) {
          themeSettings = null;
        }
        r8 = themeSettings;
      }
    }
    return r8;
  }, [guildId]);
  useEffect(() => {
    if (stateFromStores !== guildId) {
      ActionSheetActionCreators.hideActionSheet(c10735_12);
    }
  }, [guildId, stateFromStores]);
  const callback2 = useCallback((a0) => {
    setState2(null);
    setState(a0);
  }, []);
  callback = useCallback((a0) => {
    if (!ref.current) {
      ref.current = true;
      markAsDismissed(a0);
    }
  }, [markAsDismissed]);
  const callback3 = useCallback(async () => {
    let c27949_2;
    let c27949_3 = 0;
    let c30845_0;
    L13: {
      try {
        if (stateFromStores === guildId) {
          setState3(true);
          setState2(null);
          c27949_3 = 1;
          await saveGuildThemeNuxPreference(guildId, c21699_6);
          c27949_3 = 0;
          ref.current = true;
          markAsDismissed(ContentDismissActionType.TAKE_ACTION);
          ActionSheetActionCreators.hideActionSheet(c10735_12);
          break L13;
        }
      } catch ($e) {
        const r29 = $e;
        let r7 = r29;
        c27949_2 = r29;
        if (c27949_3 !== 0) {
          while (true) {
            try {
              const r85 = c27949_2;
              c27949_3 = 0;
              c30845_0 = r85;
              c10735_13.error("Failed to save guild theme NUX preference", c30845_0);
              (0, setState2)(intl.string(t.fEptJP));
              (0, setState3)(false);
            } catch (r81) {
              r7 = r81;
              c27949_2 = r81;
              if (c27949_3 === 0) {
                break;
              }
              continue;
            }
            return void 0;
          }
        }
        throw r7;
      }
      return void 0;
    }
  }, [guildId, isPersonal, markAsDismissed, stateFromStores]);
  const callback4 = useCallback(() => {
    callback(ContentDismissActionType.USER_DISMISS);
  }, [callback]);
  const text = isPersonal ? intl.string(t.cvoikF) : intl.string(t["cY+Oob"]);
  return <BottomSheet startExpanded dismissAccessibilityLabel={intl.string(t.cpT0Cq)} onDismiss={callback4} contentStyles={styles.container}>
    <GuildThemeNuxPreviewGraphic themeSettings={stateFromStores2} isPersonal={isPersonal} />
    <Text accessibilityRole="header" variant="heading-xl/semibold" color="mobile-text-heading-primary" style={styles.title}>
      {intl.string(t.Q9zFy9)}
    </Text>
    <Text variant="text-md/normal" color="text-default" style={styles.description}>
      {intl.string(t.XLpBLj)}
    </Text>
    <View style={styles.options}>
      <TableRadioGroup hasIcons={false} value={value} onChange={callback2}>
        <TableRadioRow label={intl.string(t.aN3RNQ)} value={GuildThemeSourcePreference.GUILD} />
        <TableRadioRow label={intl.string(t.js8y7t)} value={GuildThemeSourcePreference.PERSONAL} />
      </TableRadioGroup>
    </View>
    {isPersonal ? <View style={styles.warning}>
      <HelpMessage messageType={HelpMessageTypes.WARNING} borderRadius={Module712.radii.md}>
        {intl.string(t.tTHQAy)}
      </HelpMessage>
    </View> : null}
    {state != null ? <View style={styles.warning}>
      <HelpMessage messageType={HelpMessageTypes.ERROR} borderRadius={Module712.radii.md}>{state}</HelpMessage>
    </View> : null}
    <View style={styles.footer}>
      <Button text={text} variant={isPersonal ? "secondary" : "primary"} loading={loading} disabled={loading} onPress={callback3} />
    </View>
  </BottomSheet>;
};
export const GUILD_THEME_NUX_ACTION_SHEET_KEY = "GuildThemeNuxActionSheet";