// Metro module 4719 (f4720).
import { useEffect } from "react";
import { View } from "react-native";
import ClientThemesBackgroundStore from "../ClientThemesBackgroundStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import * as _shared from "../../../design/shared";
import Color from "../../../utils/Color";
import { hexToRgb, mixColors, hexWithOpacity } from "../../../utils/ColorUtils";
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
import Module4611 from "../../../_bundle/Module4611";
import useTheme from "../../../hooks/useTheme";
import Module712 from "../../../_bundle/Module712";
import { getGuildThemePresetAppearance, getSingleColorGuildThemeGradientColors, GUILD_THEME_DEFAULT_BASE_MIX } from "../../guild_themes/GuildThemePresets";
import { colorToHex } from "./ClientThemesUtils";
import Module689 from "../../../_bundle/Module689";
import SentryUtils_native from "../../../utils/SentryUtils.native";
import { useStateFromStoresObject } from "../../../_bundle/defaultAreStatesEqual";
import useRoutedActiveGuildTheme from "../../guild_themes/native/useRoutedActiveGuildTheme";
import { useCustomThemeDisplaySettings } from "./useCustomThemeDisplaySettings";
import { ClientThemeType } from "../ClientThemesTypes";
let useStyles, angleCenter, c2877_10, GradientBase, Gradient, GuildThemePresetGradient, c2877_15, CustomThemesGradient, ActiveGuildThemeGradient, $mk74871 = function() {
  return (a0, a1) => {
    if (typeof a1 === "string" && c2877_15.test(a1)) {
      a0.push(a1);
      return a0;
    }
    try {
      a0.push(Module689(a1).hex("rgb"));
    } catch ($e) {}
    return a0;
  };
};
const getMixedGradientColor = function getMixedGradientColor({ color, mixAmount: mixAmount3, mixColorOverride: mixColorOverride4, theme: theme4 }) {
  const r21 = {
    mixAmount: mixAmount3,
    mixColorOverride: mixColorOverride4,
    theme: theme4
  };
  let mixAmount4 = r21.mixAmount;
  if (mixAmount4 === void 0) {
    mixAmount4 = {};
  }
  let mixColorOverride5 = r21.mixColorOverride;
  const { theme: theme5, darkFallbackOpacity = 0.7 } = r21;
  let lightFallbackOpacity = r21.lightFallbackOpacity;
  if (lightFallbackOpacity === void 0) {
    lightFallbackOpacity = 0.8;
  }
  if (mixColorOverride5 == null) {
    const isThemeDark = _shared.isThemeDark(theme5);
    if (isThemeDark) {
      lightFallbackOpacity = darkFallbackOpacity;
    }
    let r27 = isThemeDark ? mixAmount4.dark : mixAmount4.light;
    if (r27 == null) {
      r27 = lightFallbackOpacity;
    }
    const r0 = isThemeDark ? 0 : 255;
    mixColorOverride5 = new Color(r0, r0, r0, r27);
  }
  const r33 = {
    mixAmount: mixAmount3,
    theme: theme4
  };
  const { mixAmount: mixAmount5 = {}, theme: theme6 } = r33;
  let darkFallbackAmount = r33.darkFallbackAmount;
  if (darkFallbackAmount === void 0) {
    darkFallbackAmount = 0.3;
  }
  let lightFallbackAmount = r33.lightFallbackAmount;
  if (lightFallbackAmount === void 0) {
    lightFallbackAmount = 0.2;
  }
  if (_shared.isThemeDark(theme6)) {
    if (mixAmount5.dark != null) {
      darkFallbackAmount = 1 - mixAmount5.dark;
    }
    lightFallbackAmount = darkFallbackAmount;
  } else if (mixAmount5.light != null) {
    lightFallbackAmount = 1 - mixAmount5.light;
  }
  const r53 = hexToRgb(color);
  return mixColors(mixColorOverride5, new Color(r53.r, r53.g, r53.b, lightFallbackAmount)).toHexString();
};
GradientBase = function GradientBase(props) {
  const { colors, locations, angle, angleCenter: angleCenter2 = angleCenter } = props;
  let absolute = props.absolute;
  let wide = props.wide;
  let tall = props.tall;
  const componentStyles = props.componentStyles;
  const styles = useStyles();
  const windowDimensions_native = useWindowDimensions_native();
  const { width, height } = windowDimensions_native;
  if (wide) {
    wide = {
      width
    };
  }
  const style = [wide, , , , ,];
  if (tall) {
    tall = {
      height
    };
  }
  style[1] = tall;
  style[2] = styles.linearGradient;
  if (absolute) {
    absolute = styles.absolute;
  }
  style[3] = absolute;
  style[4] = componentStyles;
  return <Module4611 colors={colors} locations={locations} angle={angle} angleCenter={angleCenter2} useAngle style={style} />;
};
Gradient = function Gradient(props) {
  const { gradient, absolute, wide, tall } = props;
  let angleOverride = props.angleOverride;
  const { componentStyles, mix, mixAmount: mixAmount3 = {} } = props;
  const mixAmount = mixAmount3;
  const mixColorOverride = props.mixColorOverride;
  const theme = useTheme();
  const props2 = {
    colors: gradient.colors.map((a0) => mix ? getMixedGradientColor({
      color: Module712.unsafe_rawColors[a0.token],
      mixAmount,
      mixColorOverride,
      theme
    }) : Module712.unsafe_rawColors[a0.token]),
    locations: gradient.colors.map((color) => color.stop / 100),
    angle: null,
    angleCenter: null,
    absolute: null,
    wide: null,
    tall: null,
    componentStyles: null
  };
  if (angleOverride == null) {
    angleOverride = gradient.angle;
  }
  props2.angle = angleOverride;
  let angleCenter2 = gradient.angleCenter;
  if (angleCenter2 == null) {
    angleCenter2 = angleCenter;
  }
  props2.angleCenter = angleCenter2;
  props2.absolute = absolute;
  props2.wide = wide;
  props2.tall = tall;
  props2.componentStyles = componentStyles;
  return <GradientBase {...props2} />;
};
GuildThemePresetGradient = function GuildThemePresetGradient(props) {
  const { preset, absolute, wide, tall } = props;
  let angleOverride = props.angleOverride;
  const { componentStyles, mix: mix2, mixAmount: mixAmount3 = {} } = props;
  const mixAmount2 = mixAmount3;
  const mixColorOverride2 = props.mixColorOverride;
  const theme2 = useTheme();
  const guildThemePresetAppearance = getGuildThemePresetAppearance(preset, theme2);
  const props2 = {
    colors: guildThemePresetAppearance.colors.map((a0) => mix2 ? getMixedGradientColor({
      color: a0.hex,
      mixAmount: mixAmount2,
      mixColorOverride: mixColorOverride2,
      theme: theme2
    }) : a0.hex),
    locations: guildThemePresetAppearance.colors.map((color) => color.stop / 100),
    angle: null,
    angleCenter: null,
    absolute: null,
    wide: null,
    tall: null,
    componentStyles: null
  };
  if (angleOverride == null) {
    angleOverride = guildThemePresetAppearance.angle;
  }
  props2.angle = angleOverride;
  props2.angleCenter = angleCenter;
  props2.absolute = absolute;
  props2.wide = wide;
  props2.tall = tall;
  props2.componentStyles = componentStyles;
  return <GradientBase {...props2} />;
};
CustomThemesGradient = function CustomThemesGradient(props) {
  const { colors, baseMix: baseMix2, gradientAngle } = props;
  let gradientColorStops = props.gradientColorStops;
  let absolute = props.absolute;
  let wide = props.wide;
  let tall = props.tall;
  const mix3 = props.mix;
  let mixAmount3 = props.mixAmount;
  if (mixAmount3 === void 0) {
    mixAmount3 = {};
  }
  let c14384_0, c14384_1;
  const { mixColorOverride: mixColorOverride4, componentStyles, theme: theme4 } = props;
  c14384_0 = void 0;
  c14384_1 = void 0;
  const styles = useStyles();
  const windowDimensions_native = useWindowDimensions_native();
  const { width, height } = windowDimensions_native;
  const baseMix = baseMix2;
  if (mixAmount3 === void 0) {
    mixAmount3 = {};
  }
  let c14385_1 = mixAmount3;
  const mixColorOverride3 = mixColorOverride4;
  const theme3 = theme4;
  const r32 = mix3 ? colors.map((color) => {
    const r1 = baseMix / 100;
    let r10 = c14385_1;
    let r12 = mixColorOverride3;
    let r3 = c2877_10;
    const r4 = r10 !== void 0;
    const r13 = r4 ? r10 : {};
    if (mixColorOverride3 == null) {
      const r2 = 1 - r1;
      let r25 = c2877_10 + 0.2 * r2;
      const isThemeDark = _shared.isThemeDark(theme3);
      if (isThemeDark) {
        r25 = c2877_10 + 0.25 * r2;
      }
      let r33 = isThemeDark ? r13.dark : r13.light;
      if (r33 == null) {
        r33 = r25;
      }
      const r34 = isThemeDark ? 0 : 255;
      r12 = new Color(r34, r34, r34, r33);
    }
    if (!r4) {
      r10 = {};
    }
    let r40 = c2877_10 === void 0 ? 0.3 : c2877_10;
    if (c2877_10 === void 0) {
      r3 = 0.2;
    }
    if (_shared.isThemeDark(theme3)) {
      if (r10.dark != null) {
        r40 = 1 - r10.dark;
      }
      r3 = r40;
    } else if (r10.light != null) {
      r3 = 1 - r10.light;
    }
    const r57 = hexToRgb(color);
    return colorToHex(mixColors(r12, new Color(r57.r, r57.g, r57.b, r3)));
  }) : colors;
  const r36 = r32.length === 1 ? [r32[0], r32[0]] : r32;
  c14384_0 = r36;
  const r45 = (gradientAngle - 90) * Math.PI / 180;
  const r48 = Math.cos(r45);
  const r51 = Math.sin(r45);
  const start = {
    x: 0.6 - 0.7142857142857143 * r48,
    y: 0.5 - 0.7142857142857143 * r51
  };
  const end = {
    x: 0.6 + 0.7142857142857143 * r48,
    y: 0.5 + 0.7142857142857143 * r51
  };
  const colors2 = r36.reduce($mk74871(), []);
  c14384_1 = colors2;
  let c14386_0 = colors2;
  if (gradientColorStops === void 0) {
    gradientColorStops = [];
  }
  const locations = gradientColorStops.length === colors2.length ? gradientColorStops.map((gradientColorStop) => gradientColorStop / 100) : colors2.length === 1 ? [0, 1] : colors2.map((item, index) => index / (c14386_0.length - 1));
  useEffect(() => {
    if (c14384_1.length < 2) {
      SentryUtils_native.captureException(new Error("Invalid custom theme gradient colors"), {
        extra: {
          gradientColors: JSON.stringify(c14384_0)
        }
      });
    }
  }, [colors2, r36]);
  const r6 = colors2.length < 2;
  let r84 = null;
  if (!r6) {
    if (wide) {
      wide = {
        width
      };
    }
    const style = [wide, , , , ,];
    if (tall) {
      tall = {
        height
      };
    }
    style[1] = tall;
    style[2] = styles.linearGradient;
    if (absolute) {
      absolute = styles.absolute;
    }
    style[3] = absolute;
    style[4] = componentStyles;
    r84 = <Module4611 colors={colors2} locations={locations} start={start} end={end} style={style} />;
  }
  return r84;
};
ActiveGuildThemeGradient = function ActiveGuildThemeGradient(props) {
  const { activeGuildTheme, theme: theme4, ...props2 } = props;
  if (activeGuildTheme.type === "custom") {
    const customUserThemeSettings = activeGuildTheme.customUserThemeSettings;
    const colors = [...getSingleColorGuildThemeGradientColors(customUserThemeSettings.colors[0], theme4)];
    let gradientAngle = customUserThemeSettings.gradientAngle;
    if (gradientAngle == null) {
      gradientAngle = 0;
    }
    let baseMix2 = customUserThemeSettings.baseMix;
    if (baseMix2 == null) {
      baseMix2 = GUILD_THEME_DEFAULT_BASE_MIX;
    }
    return <CustomThemesGradient {...props2} colors={colors} gradientColorStops={[]} gradientAngle={gradientAngle} baseMix={baseMix2} theme={theme4} />;
  }
  return <GuildThemePresetGradient {...props2} preset={activeGuildTheme.preset} />;
};
useStyles = createStyles({
  softenGradient: {
    flex: 1
  },
  linearGradient: {
    flex: 1
  },
  absolute: {
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  }
});
angleCenter = {
  x: 0.5,
  y: 0.5
};
c2877_10 = 0.5;
c2877_15 = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
export default function ThemedGradient(props) {
  let r66;
  const { overlayOpacity = 0.7, gradientOverride, ...props2 } = props;
  const styles = useStyles();
  const r14 = _shared.isThemeDark(useTheme()) ? Module712.unsafe_rawColors.BLACK : Module712.unsafe_rawColors.WHITE;
  const withOverlay = props2.withOverlay;
  const theme4 = useTheme();
  const preset = useStateFromStoresObject([ClientThemesBackgroundStore], () => ({
    preset: ClientThemesBackgroundStore.gradientPreset
  })).preset;
  const routedActiveGuildTheme = useRoutedActiveGuildTheme();
  const customThemeDisplaySettings = useCustomThemeDisplaySettings();
  const r2 = customThemeDisplaySettings !== void 0;
  if (gradientOverride != null) {
    if (r2 && gradientOverride.type === ClientThemeType.CUSTOM_BACKGROUND_GRADIENT) {
      const r161 = <CustomThemesGradient {...props2} {...gradientOverride.customThemeSettings} theme={gradientOverride.theme} />;
      return withOverlay ? <View style={styles.absolute}>
        {r161}
        <View style={[styles.softenGradient, {
          backgroundColor: hexWithOpacity(r14, overlayOpacity)
        }]} />
      </View> : r161;
    }
    if (gradientOverride.type === ClientThemeType.BACKGROUND_GRADIENT_PRESET) {
      const r135 = <Gradient {...props2} gradient={gradientOverride} />;
      return withOverlay ? <View style={styles.absolute}>
        {r135}
        <View style={[styles.softenGradient, {
          backgroundColor: hexWithOpacity(r14, overlayOpacity)
        }]} />
      </View> : r135;
    }
  }
  L24: {
    if (routedActiveGuildTheme != null) {
      const r113 = <ActiveGuildThemeGradient {...props2} activeGuildTheme={routedActiveGuildTheme} theme={theme4} />;
      r66 = withOverlay ? <View style={styles.absolute}>
        {r113}
        <View style={[styles.softenGradient, {
          backgroundColor: hexWithOpacity(r14, overlayOpacity)
        }]} />
      </View> : r113;
    } else {
      if (r2 && r2) {
        const r91 = <CustomThemesGradient {...props2} {...customThemeDisplaySettings.customTheme} theme={customThemeDisplaySettings.baseTheme} />;
        r66 = withOverlay ? <View style={styles.absolute}>
          {r91}
          <View style={[styles.softenGradient, {
            backgroundColor: hexWithOpacity(r14, overlayOpacity)
          }]} />
        </View> : r91;
        break L24;
      }
      const r65 = preset != null;
      r66 = null;
      if (r65) {
        const r21 = <Gradient {...props2} gradient={preset} />;
        r66 = withOverlay ? <View style={styles.absolute}>
          {r21}
          <View style={[styles.softenGradient, {
            backgroundColor: hexWithOpacity(r14, overlayOpacity)
          }]} />
        </View> : r21;
      }
    }
  }
  return r66;
};
export { Gradient };
export function validateColors(a0) {
  return a0.reduce($mk74871(), []);
}
export function CustomThemedGradient(props) {
  const { overlayOpacity = 0.7, customTheme, ...props2 } = props;
  const styles = useStyles();
  const r14 = _shared.isThemeDark(useTheme()) ? Module712.unsafe_rawColors.BLACK : Module712.unsafe_rawColors.WHITE;
  const r38 = <CustomThemesGradient {...props2} {...customTheme.customThemeSettings} theme={customTheme.theme} />;
  return props2.withOverlay ? <View style={styles.absolute}>
    {r38}
    <View style={[styles.softenGradient, {
      backgroundColor: hexWithOpacity(r14, overlayOpacity)
    }]} />
  </View> : r38;
}