// Metro module 14187 (f14188).
import { useMemo } from "react";
import { StyleSheet, View } from "react-native";
import { jsx } from "react/jsx-runtime";
import { createStyles, createStyleProperties } from "../../../design/components/Styles/native/createStyles";
import { hexOpacityToRgba } from "../../../utils/ColorUtils";
import Module712 from "../../../_bundle/Module712";
import { useToken } from "../../../design/tokens/native/useToken";
import useTheme from "../../../hooks/useTheme";
import * as _Module4004 from "../../../_bundle/Module4004";
import Module4611 from "../../../_bundle/Module4611";
import Module5165 from "../../../_bundle/Module5165";
function $mk93257($env) {
  return () => {
    const r1 = $env;
    return [r1[0], r1[1]];
  };
}
let useStyles, start, end, start2, end2, styleProperties, PremiumRewardGlowGradient;
const PremiumRewardFillGradient = function PremiumRewardFillGradient(props) {
  let env21020;
  const { children, style } = props;
  const styles = useStyles();
  const r18 = env21020 = {};
  env21020[0] = void 0;
  env21020[1] = void 0;
  const token2 = useToken(Module712.colors.EXPRESSIVE_GRADIENT_NITRO_PINK_START);
  env21020[0] = token2;
  const token = useToken(Module712.colors.EXPRESSIVE_GRADIENT_NITRO_PINK_END);
  env21020[1] = token;
  const memo = useMemo($mk93257(r18), [token2, token]);
  const r36 = styleProperties();
  const { transparentBlack, opaqueBlack, transparentWhite, opaqueWhite } = r36;
  const isThemeDark = _Module4004.isThemeDark(useTheme());
  return <View style={[styles.wrapper, style]}>
    <Module4611 style={styles.fill} colors={memo} start={start} end={end} pointerEvents="none" />
    <Module4611 style={styles.fill} colors={useMemo(() => isThemeDark ? [transparentBlack, opaqueBlack] : [transparentWhite, opaqueWhite], [transparentBlack, opaqueBlack, transparentWhite, opaqueWhite, isThemeDark])} start={start2} end={end2} pointerEvents="none" />
    {children}
  </View>;
};
PremiumRewardGlowGradient = function PremiumRewardGlowGradient(props) {
  let env21021;
  const { children, style } = props;
  const styles = useStyles();
  const r17 = env21021 = {};
  env21021[0] = void 0;
  env21021[1] = void 0;
  const token2 = useToken(Module712.colors.EXPRESSIVE_GRADIENT_NITRO_PINK_START);
  env21021[0] = token2;
  const token = useToken(Module712.colors.EXPRESSIVE_GRADIENT_NITRO_PINK_END);
  env21021[1] = token;
  const memo = useMemo($mk93257(r17), [token2, token]);
  const isThemeDark2 = _Module4004.isThemeDark(useTheme());
  return <View style={[styles.wrapper, style]}>
    <Module5165 style={[styles.glow, isThemeDark2 ? !isThemeDark2 : styles.glowLight]} maskElement={<Module4611 style={StyleSheet.absoluteFill} colors={["transparent", "black"]} start={start2} end={end2} />}>
      <Module4611 style={StyleSheet.absoluteFill} colors={memo} start={start} end={end} />
    </Module5165>
    {children}
  </View>;
};
useStyles = createStyles({
  wrapper: {
    position: "relative",
    overflow: "hidden"
  },
  fill: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    height: "100%"
  },
  glow: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    height: "50%"
  },
  glowLight: {
    opacity: 0.5
  }
});
start = {
  x: 0,
  y: 0.5
};
end = {
  x: 1,
  y: 0.5
};
start2 = {
  x: 0.5,
  y: 0
};
end2 = {
  x: 0.5,
  y: 1
};
styleProperties = createStyleProperties({
  transparentBlack: hexOpacityToRgba("#000000", 0),
  opaqueBlack: Module712.colors.BLACK,
  transparentWhite: hexOpacityToRgba("#FFFFFF", 0),
  opaqueWhite: Module712.colors.WHITE
});
export default function QuestPremiumRewardGradientWrapper({ visible, style, children, glow }) {
  return jsx(visible ? glow ? PremiumRewardGlowGradient : PremiumRewardFillGradient : View, {
    style,
    children
  });
};