// Metro module 14350 (f14351).
import { useCallback, useState, useMemo } from "react";
import { Pressable, ScrollView, View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import UserStore from "../../../stores/UserStore";
import { AnalyticEvents } from "../../../Constants";
import { MEDIA_PICKER_SEND_BUTTON_SPRING } from "../../media_keyboard/native/MediaKeyboardConstants";
import { DisplayNameEffect } from "../../../_bundle/Module1887";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useRoute, useNavigation } from "../../../_bundle/Module1481";
import { useStateFromStores } from "../../../_bundle/Module589";
import { useDisplayNameStylesPendingName } from "../hooks/useDisplayNameStylesPendingName";
import { useGuildMemberOrUserPendingDisplayNameStyles } from "../../profile_customization/ProfileCustomizationUtils";
import useDisplayNameStyles from "../hooks/useDisplayNameStyles";
import useTheme from "../../../hooks/useTheme";
import { DisplayNameFont } from "../../../_bundle/Module1888";
import { getEffectColorCount, generateRandomDisplayNameStyles } from "../DisplayNameStylesUtils";
import { useIsDisplayNameStylesFlywheelSettersEnabled } from "../DisplayNameStylesFlywheelExperiment";
import { useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
import useDisplayNameStylesEffectDefaultColors_native from "../hooks/useDisplayNameStylesEffectDefaultColors.native";
import { areArraysShallowEqual } from "../../../_bundle/shallowEqual";
import { useDisplayNameStylesHandleApply } from "../hooks/useDisplayNameStylesHandleApply";
import { useVisibleFontOrder } from "../DisplayNameStylesFontOrder";
import { useVisibleEffectOrder } from "../DisplayNameStylesEffectOrder";
import { useDisplayNameStylesNewFontsBadge, useDisplayNameStylesNewEffectsBadge } from "../hooks/useDisplayNameStylesNewItems";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
import { setTryItOutDisplayNameStyles } from "../../user_profile/UserProfileActionCreators";
import { setPendingChanges } from "../../user_profile/UserProfileSettingsActionCreators";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import * as _asyncRequire from "../../../_bundle/asyncRequire";
import { intl, t } from "../../../intl/index.native";
import getDisplayNameStylesFontName from "../getDisplayNameStylesFontName";
import { ThemeContextProvider } from "../../../_bundle/Module3901";
import { DisplayNameStylesContext } from "../DisplayNameStylesContext";
import DisplayNameStylesEditPreview from "./DisplayNameStylesEditPreview";
import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
import { Text } from "../../../design/components/Text/native/Text";
import { NewTag } from "../../../design/void/native";
import { ChevronSmallRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
import { int2hex } from "../../../_bundle/int2hslRaw";
import DisplayNameStylesColorSwatch from "./DisplayNameStylesColorSwatch";
import { Button } from "../../../design/components/Button/native/Button.native";
import { DiceIcon } from "../../../design/components/Icon/native/redesign/generated/DiceIcon";
import { DenyIcon } from "../../../design/components/Icon/native/redesign/generated/DenyIcon";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import ReanimatedRexport, { useAnimatedProps, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import * as _spring from "../../../design/animation/reanimated/spring/spring";
let c10092_14, useStyles, __initData, __initData2;
const ApplyButton = function ApplyButton(props) {
  const { onPress, visible } = props;
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const bottom = useSafeAreaInsets_native().bottom;
  const r26 = function() {
    return {
      pointerEvents: visible ? "box-none" : "none"
    };
  };
  r26.__closure = {
    visible
  };
  r26.__workletHash = 2349569076845;
  r26.__initData = __initData;
  const animatedProps = useAnimatedProps(r26);
  const r32 = function() {
    const r2 = visible ? 1 : 0;
    const r1 = visible ? 0 : 60;
    const r0 = visible ? 1 : 0.9;
    return {
      position: "absolute",
      bottom: 0,
      left: 0,
      right: 0,
      marginHorizontal: Module712.space.PX_16,
      flexDirection: "column",
      justifyContent: "flex-end",
      transform: [{
        translateY: stateFromStores ? r1 : _spring.withSpring(r1, MEDIA_PICKER_SEND_BUTTON_SPRING)
      }, {
        scale: stateFromStores ? r0 : _spring.withSpring(r0, MEDIA_PICKER_SEND_BUTTON_SPRING)
      }],
      opacity: stateFromStores ? r2 : _spring.withSpring(r2, MEDIA_PICKER_SEND_BUTTON_SPRING)
    };
  };
  r32.__closure = {
    visible,
    tokens: Module712,
    reducedMotion: stateFromStores,
    withSpring: _spring.withSpring,
    MEDIA_PICKER_SEND_BUTTON_SPRING
  };
  r32.__workletHash = 16786362025671;
  r32.__initData = __initData2;
  return <ReanimatedRexport.View style={useAnimatedStyle(r32)}>
    <ReanimatedRexport.View style={{
      marginBottom: bottom
    }} animatedProps={animatedProps}>
      <Button variant="primary" onPress={useCallback(() => {
        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
        onPress();
      }, [onPress])} size="lg" text={intl.string(t["1Qm822"])} />
    </ReanimatedRexport.View>
  </ReanimatedRexport.View>;
};
c10092_14 = [DisplayNameEffect.GRADIENT, DisplayNameEffect.GUMMY, DisplayNameEffect.PRISM];
useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  contentContainer: {
    padding: Module712.space.PX_16
  },
  fieldButtonGroup: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
    borderRadius: Module712.radii.md
  },
  fieldButton: {
    padding: Module712.space.PX_12,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  fieldButtonBorder: {
    borderTopWidth: 1,
    borderTopColor: Module712.colors.BORDER_SUBTLE
  },
  fieldButtonLabel: {
    flex: 1,
    marginRight: Module712.space.PX_12
  },
  fieldButtonChevron: {
    flexDirection: "row",
    gap: Module712.space.PX_8,
    flexShrink: 0
  },
  fieldButtonTrailing: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8
  },
  buttonContainer: {
    marginVertical: Module712.space.PX_16,
    paddingVertical: Module712.space.PX_16,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    borderTopWidth: 1,
    borderTopColor: Module712.colors.BORDER_MUTED,
    gap: Module712.space.PX_16
  }
});
__initData = {
  code: "function DisplayNameStylesEditScreenTsx1(){const{visible}=this.__closure;return{pointerEvents:visible?'box-none':'none'};}"
};
__initData2 = {
  code: "function DisplayNameStylesEditScreenTsx2(){const{visible,tokens,reducedMotion,withSpring,MEDIA_PICKER_SEND_BUTTON_SPRING}=this.__closure;const targetOpacity=visible?1:0;const targetTranslateY=visible?0:60;const targetScale=visible?1:0.9;return{position:'absolute',bottom:0,left:0,right:0,marginHorizontal:tokens.space.PX_16,flexDirection:'column',justifyContent:'flex-end',transform:[{translateY:reducedMotion?targetTranslateY:withSpring(targetTranslateY,MEDIA_PICKER_SEND_BUTTON_SPRING)},{scale:reducedMotion?targetScale:withSpring(targetScale,MEDIA_PICKER_SEND_BUTTON_SPRING)}],opacity:reducedMotion?targetOpacity:withSpring(targetOpacity,MEDIA_PICKER_SEND_BUTTON_SPRING)};}"
};
export default function DisplayNameStylesEditScreen() {
  let displayNameStylesPendingName, c21165_5, c21165_10, displayNameStylesEffectConfig, c21165_12, c21165_13, callback, memo, visibleFontOrder, visibleEffectOrder, showFontsBadge, dismissFontsBadge, showEffectsBadge, dismissEffectsBadge;
  const styles = useStyles();
  const route = useRoute();
  const navigation = useNavigation();
  let params = route.params;
  if (params == null) {
    params = {};
  }
  const { guildId, isTryItOut } = params;
  const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  displayNameStylesPendingName = useDisplayNameStylesPendingName(stateFromStores2, guildId);
  const styles3 = useGuildMemberOrUserPendingDisplayNameStyles(stateFromStores2, guildId);
  const { guildDisplayNameStyles, pendingDisplayNameStyles, tryItOutDisplayNameStyles } = styles3;
  const styles2 = useDisplayNameStyles({
    userId: stateFromStores2?.id,
    guildId,
    pendingDisplayNameStyles: isTryItOut ? tryItOutDisplayNameStyles : pendingDisplayNameStyles,
    ignoreDisabledStylesSetting: true
  });
  c21165_5 = styles2;
  const theme = useTheme();
  let r86 = styles2?.fontId;
  if (r86 == null) {
    r86 = DisplayNameFont.DEFAULT;
  }
  const [state, setState] = useState(r86);
  let r95 = styles2?.effectId;
  if (r95 == null) {
    r95 = DisplayNameEffect.SOLID;
  }
  const [state2, setState2] = useState(r95);
  const r105 = getEffectColorCount(state2) > 1;
  c21165_10 = r105;
  const isDisplayNameStylesFlywheelSettersEnabled = useIsDisplayNameStylesFlywheelSettersEnabled("DisplayNameStylesEditScreen");
  displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(state2);
  c21165_12 = useDisplayNameStylesEffectDefaultColors_native();
  let r116 = styles2?.colors;
  if (r116 == null) {
    r116 = [];
  }
  c21165_13 = r116;
  const [state3, setState3] = useState(r116.length > 0 && !r105 ? r116[0] : displayNameStylesEffectConfig.defaultColors[0]);
  const [state4, setState4] = useState(() => Object.fromEntries(c10092_14.map((item) => {
    const r1 = [item, ,];
    let r2 = c21165_13;
    if (!(r2.length > 0 && state2 === item)) {
      r2 = c21165_12[item];
    }
    r1[1] = r2;
    return r1;
  })));
  callback = useCallback((c27728_0, c27728_1) => {
    setState4((prevState4) => {
      const r0 = {
        ...prevState4
      };
      r0[c27728_0] = c27728_1;
      return r0;
    });
  }, []);
  memo = useMemo(() => {
    let r1;
    if (c21165_10) {
      let r6 = state4[state2];
      if (r6 == null) {
        r6 = displayNameStylesEffectConfig.defaultColors;
      }
      r1 = r6;
    } else {
      r1 = [state3];
    }
    return r1;
  }, [r105, state4, state2, displayNameStylesEffectConfig.defaultColors, state3]);
  const memo2 = useMemo(() => {
    let r9 = state !== c21165_5?.fontId || state2 !== c21165_5?.effectId;
    if (!r9) {
      let r19 = c21165_5?.colors;
      if (r19 == null) {
        r19 = [];
      }
      r9 = !areArraysShallowEqual(memo, r19);
    }
    return r9;
  }, [styles2, state, state2, memo]);
  const displayNameStylesHandleApply = useDisplayNameStylesHandleApply({
    hasChanges: memo2,
    selectedFontId: state,
    selectedEffectId: state2,
    selectedColors: memo,
    defaultColor: displayNameStylesEffectConfig.defaultColors[0],
    guildId,
    isTryItOut,
    onClose: () => navigation.goBack()
  });
  visibleFontOrder = useVisibleFontOrder();
  visibleEffectOrder = useVisibleEffectOrder();
  const displayNameStylesNewFontsBadge = useDisplayNameStylesNewFontsBadge(visibleFontOrder);
  showFontsBadge = displayNameStylesNewFontsBadge.showFontsBadge;
  dismissFontsBadge = displayNameStylesNewFontsBadge.dismissFontsBadge;
  const displayNameStylesNewEffectsBadge = useDisplayNameStylesNewEffectsBadge(visibleEffectOrder);
  showEffectsBadge = displayNameStylesNewEffectsBadge.showEffectsBadge;
  dismissEffectsBadge = displayNameStylesNewEffectsBadge.dismissEffectsBadge;
  const callback3 = useCallback(() => {
    const styles = generateRandomDisplayNameStyles(visibleFontOrder, visibleEffectOrder);
    const { fontId, effectId, colors } = styles;
    setState(fontId);
    setState2(effectId);
    if (getEffectColorCount(effectId) > 1) {
      callback(effectId, colors);
    } else {
      setState3(colors[0]);
    }
    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_SURPRISE_ME);
  }, [callback, visibleFontOrder, visibleEffectOrder]);
  const callback4 = useCallback(() => {
    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
    if (isTryItOut) {
      setTryItOutDisplayNameStyles(null);
    } else {
      setPendingChanges({
        displayNameStyles: null
      });
    }
    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_REMOVED);
    navigation.goBack();
  }, [navigation, isTryItOut]);
  const callback2 = useCallback(() => {
    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
    setPendingChanges({
      guildId,
      displayNameStyles: null
    });
    navigation.goBack();
  }, [guildId, navigation]);
  const callback5 = useCallback(() => {
    if (showFontsBadge) {
      dismissFontsBadge();
    }
    ActionSheetActionCreators.openLazy(import("./DisplayNameStylesFontPickerSheet"), "DisplayNameStylesFontPickerSheet", {
      selectedFontId: state,
      onSelectFont: setState,
      displayName: displayNameStylesPendingName
    });
  }, [state, displayNameStylesPendingName, showFontsBadge, dismissFontsBadge]);
  const callback7 = useCallback(() => {
    if (showEffectsBadge) {
      dismissEffectsBadge();
    }
    ActionSheetActionCreators.openLazy(import("./DisplayNameStylesEffectPickerSheet"), "DisplayNameStylesEffectPickerSheet", {
      userId: stateFromStores2?.id,
      selectedEffectId: state2,
      onSelectEffect: setState2
    });
  }, [state2, stateFromStores2?.id, showEffectsBadge, dismissEffectsBadge]);
  const callback6 = useCallback(() => {
    if (state2 === DisplayNameEffect.GUMMY) {
      ActionSheetActionCreators.openLazy(import("./DisplayNameStylesGummyColorPickerSheet"), "DisplayNameStylesGummyColorPickerSheet", {
        selectedColors: memo,
        onSelectColors: (a0) => callback(DisplayNameEffect.GUMMY, a0)
      });
    } else if (c21165_10) {
      ActionSheetActionCreators.openLazy(_asyncRequire(dependencyMap[36], dependencyMap.paths), "DisplayNameStylesGradientPickerSheet", {
        selectedColors: memo,
        selectedEffectId: state2,
        onSelectColors: (a0) => callback(state2, a0)
      });
    } else {
      ActionSheetActionCreators.openLazy(_asyncRequire(dependencyMap[37], dependencyMap.paths), "DisplayNameStylesColorPickerSheet", {
        selectedColor: state3,
        selectedEffectId: state2,
        onSelectColor: setState3
      });
    }
  }, [r105, memo, state3, state2, callback]);
  const r47 = intl.string(getDisplayNameStylesFontName(state));
  const r191 = stateFromStores2 == null;
  let r192 = null;
  if (!r191) {
    const Provider = DisplayNameStylesContext.Provider;
    const contentContainerStyle = {
      ...styles.contentContainer,
      paddingBottom: memo2 ? 70 : 0
    };
    const r217 = [<DisplayNameStylesEditPreview user={stateFromStores2} displayName={displayNameStylesPendingName} guildId={guildId} selectedFontId={state} selectedEffectId={state2} selectedColors={memo} />, , ,];
    const r49 = intl.string(DisplayNameStyles_messages["0JCuGm"]);
    const r288 = [<Pressable onPress={callback5} style={styles.fieldButton} accessibilityRole="button" accessibilityLabel={showFontsBadge ? `${r49}, ${r47}, ${intl.string(t.y2b7CA)}` : `${r49}, ${r47}`}>
      <View>
        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
          {intl.string(DisplayNameStyles_messages["0JCuGm"])}
        </Text>
        <Text variant="text-md/normal" color="text-subtle">{r47}</Text>
      </View>
      {showFontsBadge ? <View style={styles.fieldButtonTrailing}>
        <NewTag />
        <ChevronSmallRightIcon color="icon-muted" />
      </View> : <ChevronSmallRightIcon color="icon-muted" />}
    </Pressable>, , ,];
    const r300 = intl.string(DisplayNameStyles_messages.RVtMxT);
    const name = displayNameStylesEffectConfig.name;
    r288[1] = <Pressable onPress={callback7} style={[styles.fieldButton, styles.fieldButtonBorder]} accessibilityRole="button" accessibilityLabel={showEffectsBadge ? `${r300}, ${name}, ${intl.string(t.y2b7CA)}` : `${r300}, ${name}`}>
      <View>
        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
          {intl.string(DisplayNameStyles_messages.RVtMxT)}
        </Text>
        <Text variant="text-md/normal" color="text-subtle">{displayNameStylesEffectConfig.name}</Text>
      </View>
      {showEffectsBadge ? <View style={styles.fieldButtonTrailing}>
        <NewTag />
        <ChevronSmallRightIcon color="icon-muted" />
      </View> : <ChevronSmallRightIcon color="icon-muted" />}
    </Pressable>;
    r288[2] = <Pressable onPress={callback6} style={[styles.fieldButton, styles.fieldButtonBorder]} accessibilityRole="button" accessibilityLabel={intl.string(DisplayNameStyles_messages["6OxgN7"])}>
      <View style={styles.fieldButtonLabel}>
        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
          {intl.string(DisplayNameStyles_messages["6OxgN7"])}
        </Text>
        <Text variant={isDisplayNameStylesFlywheelSettersEnabled ? "text-sm/normal" : "text-md/normal"} color="text-subtle" lineClamp={1}>
          {memo.map((item) => int2hex(item)).join(", ")}
        </Text>
      </View>
      <View style={styles.fieldButtonChevron}>
        <DisplayNameStylesColorSwatch colors={memo} effectId={state2} />
        <ChevronSmallRightIcon color="icon-muted" />
      </View>
    </Pressable>;
    r217[1] = <View style={styles.fieldButtonGroup}>{r288}</View>;
    r217[2] = <View style={styles.buttonContainer}>
      <Button text={intl.string(DisplayNameStyles_messages.NOGFds)} onPress={callback3} variant="tertiary" size="lg" grow icon={<DiceIcon />} iconPosition="start" />
      {guildId == null && styles2 != null && <Button text={intl.string(DisplayNameStyles_messages.ymq8WQ)} onPress={callback4} variant="tertiary" size="lg" grow icon={<DenyIcon />} iconPosition="start" />}
      {guildId != null && (guildDisplayNameStyles != null || pendingDisplayNameStyles != null) && <Button text={intl.string(DisplayNameStyles_messages["j/KRxc"])} onPress={callback2} variant="tertiary" size="lg" grow icon={<DenyIcon />} iconPosition="start" />}
    </View>;
    r192 = <ThemeContextProvider theme={theme}>
      <Provider value={{
        overrideSettings: true
      }}>
        <View style={styles.container}>
          <ScrollView contentContainerStyle={contentContainerStyle}>{r217}</ScrollView>
          <ApplyButton onPress={displayNameStylesHandleApply} visible={memo2} />
        </View>
      </Provider>
    </ThemeContextProvider>;
  }
  return r192;
};