// Metro module 8380 (f8381).
import * as Module19 from "react";
import { useMemo } from "react";
import { PixelRatio, StyleSheet, View, processColor } from "react-native";
import { MIN_PRISM_GRADIENT_WIDTH } from "../DisplayNameStylesConstants";
import { DisplayNameEffect } from "../../../_bundle/Module1887";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { isIOS } from "../../../_bundle/Module501";
import { isIosFabric } from "../../../utils/native/FabricUtils";
import { EffectDisplayType } from "../types";
import useDisplayNameStyles from "../hooks/useDisplayNameStyles";
import { useIsDisplayNameStylesFlywheelViewersEnabled } from "../DisplayNameStylesFlywheelExperiment";
import { applyFlywheelViewingFallback, generateColorVariants } from "../DisplayNameStylesUtils";
import { useDisplayNameStylesEnabled } from "../hooks/useDisplayNameStylesEnabled";
import { useDisplayNameStylesFont } from "./useDisplayNameStylesFont";
import { useToken } from "../../../design/tokens/native/useToken";
import { useDisplayNameStylesAccessibleColors } from "../hooks/useDisplayNameStylesAccessibleColors";
import { TextStyleSheet, Text } from "../../../design/components/Text/native/Text";
import { useTypographyVariantRemap } from "../../../_bundle/Module4194";
import { getNodeText } from "../../../design/utils/shared/getNodeText";
import PerLetterEffect from "./effects/PerLetterEffect";
import { isNotNullish } from "../../../utils/GlobalUtils";
import { HermesBuiltin } from "../../../_hermes/prelude";
const r29 = {};
r29[DisplayNameEffect.NEON] = 1;
r29[DisplayNameEffect.TOON] = 1.6;
r29[DisplayNameEffect.POP] = 1.2;
let c5373_11 = r29;
const useStyles = createStyles((a0, a1) => {
  let r59;
  const r19 = PixelRatio.get();
  const r4 = 0.04 * a1;
  const textShadowRadius = 4 + 0.12 * a1;
  const r16 = c5373_11[DisplayNameEffect.NEON] + 0.04 * a1;
  const r9 = c5373_11[DisplayNameEffect.TOON] + 0.04 * a1;
  const r40 = c5373_11[DisplayNameEffect.POP] + 0.04 * a1;
  const r47 = Math.floor(r9 / 2) / r19;
  const neon = {
    color: Module712.colors.WHITE,
    textShadowColor: a0,
    textShadowRadius,
    textShadowOffset: {
      width: 0,
      height: 0
    }
  };
  if (isIOS()) {
    const top = -r16 / 2;
    const marginVertical = -textShadowRadius;
    r59 = {
      top,
      left: top,
      padding: textShadowRadius,
      marginVertical,
      marginLeft: marginVertical,
      marginRight: marginVertical - r16
    };
  } else {
    r59 = {
      left: -r16,
      paddingRight: textShadowRadius,
      marginRight: -textShadowRadius - r16
    };
  }
  HermesBuiltin.copyDataProperties(neon, r59);
  return {
    neon,
    popContainer: {
      position: "relative",
      top: isIOS() ? -r40 / 2 : 0,
      left: isIOS() ? -r40 / 2 : 0,
      marginRight: isIOS() ? -r40 : 0
    },
    popBackLayer: {
      color: a0,
      position: "absolute",
      ...isIosFabric() ? {
        top: 1.2 + r4
      } : {
        transform: [{
          translateY: 1.2 + r4
        }]
      }
    },
    popFrontLayer: {
      color: Module712.colors.WHITE
    },
    toon: {
      color: Module712.colors.WHITE,
      top: isIOS() ? -r9 / 2 : 0,
      left: isIOS() ? -r9 / 2 : -r47,
      marginRight: isIOS() ? -r9 : -r47
    }
  };
});
const r51 = Module19.memo(function({ userId, guildId, userName, effectDisplayType = EffectDisplayType.STATIC, pendingDisplayNameStyles, defaultColor, ignoreDisabledStylesSetting = false, ...props }) {
  let r164, gradientAngle, gradientColors, gradientLength, textStrokeColor, textStrokeWidth2;
  const styles = useDisplayNameStyles({
    userId,
    guildId,
    pendingDisplayNameStyles,
    ignoreDisabledStylesSetting
  });
  const displayNameStyles = applyFlywheelViewingFallback(styles, useIsDisplayNameStylesFlywheelViewersEnabled("UsernameWithEffects"));
  const displayNameStylesEnabled = useDisplayNameStylesEnabled({
    location: "UsernameWithEffects"
  });
  const displayNameStylesFont = useDisplayNameStylesFont({
    displayNameStyles,
    ignoreDisabledStylesSetting
  });
  const token = useToken(Module712.colors.BACKGROUND_BASE_LOW);
  const token2 = useToken(Module712.colors.WHITE);
  const displayNameStylesAccessibleColors = useDisplayNameStylesAccessibleColors({
    displayNameStyles,
    backgroundColor: token
  });
  const color = displayNameStylesAccessibleColors.length > 0 ? displayNameStylesAccessibleColors[0] : void 0;
  let r85 = displayNameStyles?.effectId;
  if (r85 == null) {
    r85 = DisplayNameEffect.SOLID;
  }
  const r27 = color != null ? generateColorVariants(color) : null;
  const r100 = TextStyleSheet[useTypographyVariantRemap(props.variant, false)];
  const r104 = StyleSheet.flatten(props.style);
  let r106 = r104?.fontSize;
  if (r106 == null) {
    r106 = r100?.fontSize;
  }
  if (r106 == null) {
    r106 = 16;
  }
  let c16548_1 = r106;
  let r29 = r104?.lineHeight;
  if (r29 == null) {
    r29 = r100?.lineHeight;
  }
  if (r29 == null) {
    r29 = 1.25 * r106;
  }
  const memo = useMemo(() => {
    let r13 = getNodeText(userName)?.length;
    if (r13 == null) {
      r13 = 10;
    }
    return r13 * c16548_1 * 0.6;
  }, [userName, r106]);
  const r118 = c5373_11[r85];
  const textStrokeWidth = r118 != null ? r118 + 0.04 * r106 : void 0;
  let r125 = r27?.main;
  if (r125 == null) {
    r125 = "";
  }
  const styles2 = useStyles(r125, r106);
  if (!(!displayNameStylesEnabled && !ignoreDisabledStylesSetting) && styles != null) {
    if (effectDisplayType !== EffectDisplayType.PLAIN && r27 != null) {
      const textStyle = [props.style, displayNameStylesFont != null && {
        fontFamily: displayNameStylesFont
      }];
      if (r85 === DisplayNameEffect.GUMMY) {
        let name = getNodeText(userName);
        if (name == null) {
          name = "";
        }
        return <PerLetterEffect name={name} textStyle={textStyle} textProps={{
          ...props,
          gradientColors: void 0,
          gradientLength: memo,
          gradientMode: "clamp",
          gradientAngle: void 0,
          textStrokeWidth: void 0,
          textStrokeColor: void 0
        }} colors={displayNameStylesAccessibleColors} />;
      }
      L72: {
        if (DisplayNameEffect.GRADIENT !== r85 && DisplayNameEffect.PRISM !== r85) {
          if (DisplayNameEffect.NEON === r85) {
            const r220 = processColor(r27?.neonStroke);
            const r222 = r220 ?? void 0;
            const r224 = [textStyle, styles2.neon];
            textStrokeColor = r222;
            gradientLength = memo;
            r164 = r224;
            textStrokeWidth2 = textStrokeWidth;
            gradientAngle = void 0;
            gradientColors = void 0;
            break L72;
          }
          if (DisplayNameEffect.POP === r85) {
            const r34 = processColor(r27?.dark2);
            const r33 = processColor(r27?.main);
            const r187 = r27 != null;
            gradientLength = memo;
            r164 = textStyle;
            textStrokeColor = void 0;
            textStrokeWidth2 = void 0;
            gradientAngle = void 0;
            gradientColors = void 0;
            if (!r187) {
              break L72;
            }
            return <View style={styles2.popContainer}>
              <Text {...props} textStrokeWidth={textStrokeWidth} textStrokeColor={r33 ?? void 0} style={[textStyle, styles2.popBackLayer]}>{userName}</Text>
              <Text {...props} textStrokeWidth={textStrokeWidth} textStrokeColor={r34 ?? void 0} style={[textStyle, styles2.popFrontLayer]}>{userName}</Text>
            </View>;
          }
          if (DisplayNameEffect.TOON === r85) {
            const r28 = [textStyle, styles2.toon];
            const r172 = [processColor(token2), processColor(r27.light2), processColor(r27.light1), processColor(r27.main)];
            const r180 = processColor(r27.toonStroke);
            const r181 = r180 ?? void 0;
            gradientAngle = 90;
            textStrokeColor = r181;
            gradientLength = r29;
            r164 = r28;
            textStrokeWidth2 = textStrokeWidth;
            gradientColors = r172;
            break L72;
          }
          DisplayNameEffect.SOLID;
          r164 = [textStyle, {
            color
          }];
          gradientLength = memo;
          textStrokeColor = void 0;
          textStrokeWidth2 = void 0;
          gradientAngle = void 0;
          gradientColors = void 0;
        } else {
          const r232 = displayNameStylesAccessibleColors.map((displayNameStylesAccessibleColor) => processColor(displayNameStylesAccessibleColor)).filter(isNotNullish);
          const r237 = r85 === DisplayNameEffect.PRISM ? 0 : 45;
          const PRISM = DisplayNameEffect.PRISM;
          gradientLength = memo;
          r164 = textStyle;
          textStrokeColor = void 0;
          textStrokeWidth2 = void 0;
          gradientAngle = r237;
          gradientColors = r232;
          if (r85 === PRISM) {
            const r243 = r232.length > 0 ? [...r232, r232[0]] : r232;
            gradientLength = Math.max(memo, MIN_PRISM_GRADIENT_WIDTH);
            gradientColors = r243;
            r164 = textStyle;
            textStrokeColor = void 0;
            textStrokeWidth2 = void 0;
            gradientAngle = r237;
          }
        }
      }
      return <Text {...props} gradientColors={gradientColors} gradientLength={gradientLength} gradientMode="clamp" style={[r164]} gradientAngle={gradientAngle} textStrokeWidth={textStrokeWidth2} textStrokeColor={textStrokeColor}>{userName}</Text>;
    }
    return <Text {...props} gradientLength={memo} gradientMode="clamp" style={[props.style, displayNameStylesFont != null && {
      fontFamily: displayNameStylesFont,
      lineHeight: void 0
    }]} color={defaultColor}>{userName}</Text>;
  }
  return <Text {...props} color={defaultColor}>{userName}</Text>;
});
export default r51;
export const AVERAGE_FONT_WIDTH_RATIO = 0.6;