discord-decomp/modules/display_name_styles/native/DisplayNameStylesFontPickerSheet.tsx

// Metro module 14358 (f14359).
import { useState, useCallback } from "react";
import { Pressable, View } from "react-native";
import { FLYWHEEL_FONTS } from "../DisplayNameStylesConstants";
import { Fonts } from "../../../_bundle/Module505";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useBottomSheetRef } from "../../../design/components/Sheet/native/useBottomSheetRef";
import { useVisibleFontOrder } from "../DisplayNameStylesFontOrder";
import { useDisplayNameStylesNewFonts } from "../hooks/useDisplayNameStylesNewItems";
import { DisplayNameFont } from "../../../_bundle/Module1888";
import * as _DisplayNameStylesUtils from "../DisplayNameStylesUtils";
import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
import { intl, t } from "../../../intl/index.native";
import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
import { Button } from "../../../design/components/Button/native/Button.native";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import getDisplayNameStylesFontName from "../getDisplayNameStylesFontName";
import { DISPLAY_NAME_STYLES_FONT_FAMILY_MAP } from "./useDisplayNameStylesFont";
import { Text } from "../../../design/components/Text/native/Text";
import { CircleInformationIcon } from "../../../design/components/Icon/native/redesign/generated/CircleInformationIcon";
const useStyles = createStyles({
  header: {
    paddingTop: 4
  },
  headerTrailing: {
    justifyContent: "center",
    alignItems: "center"
  },
  container: {
    flex: 1
  },
  contentContainer: {
    padding: Module712.space.PX_8,
    alignItems: "center"
  },
  gridContainer: {
    flexWrap: "wrap",
    maxWidth: 350
  },
  fontCard: {
    width: 79,
    height: 79,
    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
    borderRadius: Module712.radii.sm,
    borderWidth: 1,
    borderColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
    justifyContent: "center",
    alignItems: "center"
  },
  fontCardSelected: {
    borderColor: Module712.colors.CONTROL_BRAND_FOREGROUND
  },
  fontText: {
    fontSize: 24,
    lineHeight: 34,
    textAlign: "center",
    textAlignVertical: "center"
  },
  tileNewDot: {
    position: "absolute",
    top: Module712.space.PX_8,
    right: Module712.space.PX_8,
    width: Module712.space.PX_8,
    height: Module712.space.PX_8,
    borderRadius: Module712.space.PX_8 / 2,
    backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND,
    shadowColor: Module712.colors.BADGE_BACKGROUND_BRAND,
    shadowRadius: Module712.space.PX_4,
    shadowOpacity: 1,
    elevation: 4
  },
  betaCaption: {
    position: "absolute",
    bottom: Module712.space.PX_4,
    left: 0,
    right: 0,
    textAlign: "center"
  },
  nonLatinDisclaimer: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8,
    paddingHorizontal: Module712.space.PX_12,
    paddingVertical: Module712.space.PX_8,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    borderRadius: Module712.radii.sm,
    marginTop: Module712.space.PX_16
  },
  disclaimerText: {
    flex: 1
  }
});
export default function DisplayNameStylesFontPickerSheet(props) {
  const { selectedFontId, onSelectFont, displayName } = props;
  const styles = useStyles();
  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
  const visibleFontOrder = useVisibleFontOrder();
  const displayNameStylesNewFonts = useDisplayNameStylesNewFonts(visibleFontOrder);
  const { dotFontIds, dismissFontDot } = displayNameStylesNewFonts;
  const [state, setState] = useState(selectedFontId);
  let r11 = state !== DisplayNameFont.DEFAULT;
  const hasNonLatinLetters = _DisplayNameStylesUtils.hasNonLatinLetters(displayName);
  const r2 = state !== selectedFontId;
  let c21174_6 = r2;
  const callback = useCallback((a0) => {
    setState(a0);
  }, []);
  const callback2 = useCallback(() => {
    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
    if (c21174_6) {
      onSelectFont(state);
    }
    ActionSheetActionCreators.hideActionSheet();
  }, [r2, state, onSelectFont]);
  const props2 = {
    ref: bottomSheetRef,
    header: <View style={styles.header}>
      <BottomSheetTitleHeader title={intl.string(DisplayNameStyles_messages["0JCuGm"])} trailing={<View style={styles.headerTrailing}>
        <Button text={intl.string(t.XqMe3N)} onPress={callback2} variant="primary" size="sm" />
      </View>} />
    </View>,
    children: null
  };
  const r106 = [<Stack direction="horizontal" align="center" justify="center" spacing={8} style={styles.gridContainer}>
    {visibleFontOrder.map((item) => {
      const r19 = intl.string(getDisplayNameStylesFontName(item));
      let fontFamily = DISPLAY_NAME_STYLES_FONT_FAMILY_MAP[item];
      if (fontFamily == null) {
        fontFamily = Fonts.PRIMARY_SEMIBOLD;
      }
      let r11 = dotFontIds.has(item);
      let c27729_1 = r11;
      let r32 = FLYWHEEL_FONTS.includes(item);
      const accessibilityLabel = r32 ? `${r19}, ${intl.string(t.oW0eUd)}` : r19;
      const selected = item === state;
      const style = [styles.fontCard, selected && styles.fontCardSelected];
      const r66 = [<Text variant="text-lg/semibold" color={selected ? "mobile-text-heading-primary" : "text-default"} style={[styles.fontText, {
        fontFamily
      }]}>Gg</Text>, , ,];
      if (r11) {
        r11 = <View style={styles.tileNewDot} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />;
      }
      r66[1] = r11;
      if (r32) {
        r32 = <Text variant="text-xs/normal" color="text-subtle" style={styles.betaCaption}>
          {intl.string(t.oW0eUd)}
        </Text>;
      }
      r66[2] = r32;
      return <Pressable key={item} onPress={() => {
        callback(item);
        if (c27729_1) {
          dismissFontDot(item);
        }
      }} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityState={{
        selected
      }}>
        <View style={style}>{r66}</View>
      </Pressable>;
    })}
  </Stack>, ,];
  if (r11) {
    r11 = hasNonLatinLetters;
  }
  if (r11) {
    r11 = <View style={styles.nonLatinDisclaimer}>
      <CircleInformationIcon size="sm" />
      <Text variant="text-xs/normal" color="text-subtle" style={styles.disclaimerText}>
        {intl.string(DisplayNameStyles_messages["+O1xL2"])}
      </Text>
    </View>;
  }
  r106[1] = r11;
  props2.children = <View style={styles.container}>
    <View style={styles.contentContainer}>{r106}</View>
  </View>;
  return <BottomSheet {...props2} />;
};