// Metro module 4609 (f4610).
import { useRef, useState, useEffect, useContext } from "react";
import { StyleSheet, View } from "react-native";
import { Fragment } from "react/jsx-runtime";
import { DEFAULT_BUTTON_SIZE, getButtonPadding, SMALL_BUTTON_HEIGHT, SMALL_BUTTON_ICON_SIZE, MEDIUM_BUTTON_HEIGHT, MEDIUM_BUTTON_ICON_SIZE, LARGE_BUTTON_HEIGHT, LARGE_BUTTON_ICON_SIZE, SMALL_BUTTON_HORIZONTAL_PADDING, MEDIUM_BUTTON_HORIZONTAL_PADDING, LARGE_BUTTON_HORIZONTAL_PADDING, getButtonBorderRadius, BUTTON_BORDER_WIDTH } from "./ButtonConstants.native";
import { createStyles } from "../../Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useButtonPillStyles, useGradientPillStyles } from "./ButtonHooks.native";
import { useThemeContext, ExpressiveButtonRive } from "../../../../_bundle/Module3901";
import { useToken } from "../../../tokens/native/useToken";
import { ButtonShine } from "./ButtonShine.native";
import Module4611 from "../../../../_bundle/Module4611";
import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
import ReanimatedRexport, { useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
import { isThemeLight } from "../../../shared";
import { Ellipsis } from "./ButtonEllipsis.native";
import { AccessibilityPreferencesContext } from "../../../../_bundle/Module3908";
import * as _spring from "../../../animation/reanimated/spring/spring";
import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
let FADE_DELAY, buttonPadding, buttonPadding2, buttonPadding3, useStyles, BasicButtonPill, LoadingButtonPill, __initData, __initData2, useLoadingStyles;
const PillWrapper = function PillWrapper(props) {
  let props2;
  const { children, variant, style, pressed, shiny = false, expressiveRiveRef, expressivePressState, size } = props;
  const styles = useButtonPillStyles(variant, pressed);
  const styles2 = useGradientPillStyles(variant);
  const theme = useThemeContext().theme;
  const styles3 = useStyles(variant, size);
  let colors = [useToken(Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PURPLE_FOR_GRADIENT), useToken(Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PURPLE_FOR_GRADIENT_2), useToken(Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PINK_FOR_GRADIENT)];
  const r66 = [Module712.unsafe_rawColors.PREMIUM_TIER_0_PURPLE_FOR_GRADIENTS, Module712.unsafe_rawColors.PREMIUM_TIER_0_BLUE_FOR_GRADIENTS_2, Module712.unsafe_rawColors.PREMIUM_TIER_0_BLUE_FOR_GRADIENTS];
  const r10 = shiny ? <ButtonShine variant={variant} /> : null;
  if (variant !== "experimental_premium-primary" && variant !== "experimental_premium-basic") {
    props2 = {
      children: [variant === "expressive" && <View style={[StyleSheet.absoluteFill, styles3.expressivePill]}>
        <ExpressiveButtonRive withReducedMotion="short-loop" ref={expressiveRiveRef} fit="layout" artboard={isThemeLight(theme) ? "Mobile Expressive Button Lightmode" : "Mobile Expressive Button Dark Mode"} dataBinding={{
          buttonColor: styles3.expressiveRiveFill.color,
          cornerRadius: styles3.expressivePill.borderRadius,
          ...expressivePressState
        }} />
      </View>, <ReanimatedRexport.View style={[style, styles]}>
        {children}
        {r10}
      </ReanimatedRexport.View>]
    };
  } else {
    if (variant === "experimental_premium-basic") {
      colors = r66;
    }
    props2 = {
      children: [<Module4611 start={{
        x: 0,
        y: 0
      }} end={{
        x: 1,
        y: 0
      }} style={[style, styles2, StyleSheet.absoluteFill]} colors={colors} />, <ReanimatedRexport.View style={[style, styles]}>
        {children}
        {r10}
      </ReanimatedRexport.View>]
    };
  }
  return <Fragment {...props2} />;
};
BasicButtonPill = function BasicButtonPill(props) {
  const { children, style, pressed, variant = "primary", size = DEFAULT_BUTTON_SIZE, shiny = false, expressiveRiveRef, expressivePressState } = props;
  const styles = useStyles(variant, size);
  return <PillWrapper variant={variant} size={size} style={[styles.pill, style]} pressed={pressed} shiny={shiny} expressiveRiveRef={expressiveRiveRef} expressivePressState={expressivePressState}>
    <View style={styles.childContainer}>{children}</View>
  </PillWrapper>;
};
LoadingButtonPill = function LoadingButtonPill(props) {
  const { children, style, pressed, variant = "primary", size = DEFAULT_BUTTON_SIZE, loading = false } = props;
  let c14356_0 = loading;
  let loaderSize = props.loaderSize;
  const { expressiveRiveRef, expressivePressState } = props;
  const styles = useStyles(variant, size);
  const ref = useRef(null);
  let [state, setState] = useState(loading);
  useEffect(() => {
    if (ref.current != null) {
      clearTimeout(ref.current);
    }
    if (c14356_0) {
      setState(true);
    } else {
      ref.current = setTimeout(() => {
        setState(false);
      }, 500);
    }
  }, [loading]);
  const [r20, r39] = useLoadingStyles(loading, size);
  const r54 = [<ReanimatedRexport.View style={[styles.childContainer, r20]}>{children}</ReanimatedRexport.View>, ,];
  if (state) {
    if (loaderSize == null) {
      loaderSize = size;
    }
    state = <Ellipsis variant={variant} size={loaderSize} />;
  }
  r54[1] = <ReanimatedRexport.View style={[styles.ellipsis, r39]}>{state}</ReanimatedRexport.View>;
  return <PillWrapper variant={variant} size={size} style={[styles.pill, style]} pressed={pressed} expressiveRiveRef={expressiveRiveRef} expressivePressState={expressivePressState}>{r54}</PillWrapper>;
};
useLoadingStyles = function useLoadingStyles(a0, size) {
  const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
  const offsetY = size === "lg" ? 18 : 12;
  let c14357_2 = offsetY;
  const r24 = function() {
    let r29;
    const opacity = _spring.withSpring(a0 ? 0 : 1, _springPresets.SUBTLE_SPRING, "animate-always");
    const r19 = {
      opacity: null,
      transform: null
    };
    if (enabled) {
      r19.opacity = a0 ? opacity : _ReanimatedRexport.withDelay(FADE_DELAY, opacity);
      r19.transform = [{
        translateY: 0
      }];
      r29 = r19;
    } else {
      r19.opacity = opacity;
      r19.transform = [{
        translateY: _spring.withSpring(a0 ? -1 * c14357_2 : 0, _springPresets.SUBTLE_SPRING)
      }];
      r29 = r19;
    }
    return r29;
  };
  r24.__closure = {
    withSpring: _spring.withSpring,
    loading: a0,
    SUBTLE_SPRING: _springPresets.SUBTLE_SPRING,
    useReducedMotion: enabled,
    withDelay: _ReanimatedRexport.withDelay,
    FADE_DELAY,
    offsetY
  };
  r24.__workletHash = 9388603334085;
  r24.__initData = __initData;
  const r35 = [useAnimatedStyle(r24), ,];
  const l = function l() {
    let r29;
    const opacity = _spring.withSpring(a0 ? 1 : 0, _springPresets.SUBTLE_SPRING, "animate-always");
    const r20 = {
      opacity: null,
      transform: null
    };
    if (enabled) {
      r20.opacity = a0 ? _ReanimatedRexport.withDelay(FADE_DELAY, opacity) : opacity;
      r20.transform = [{
        translateY: 0
      }];
      r29 = r20;
    } else {
      r20.opacity = opacity;
      r20.transform = [{
        translateY: _spring.withSpring(a0 ? 0 : c14357_2, _springPresets.SUBTLE_SPRING)
      }];
      r29 = r20;
    }
    return r29;
  };
  l.__closure = {
    withSpring: _spring.withSpring,
    loading: a0,
    SUBTLE_SPRING: _springPresets.SUBTLE_SPRING,
    useReducedMotion: enabled,
    withDelay: _ReanimatedRexport.withDelay,
    FADE_DELAY,
    offsetY
  };
  l.__workletHash = 8255420825872;
  l.__initData = __initData2;
  r35[1] = useAnimatedStyle(l);
  return r35;
};
FADE_DELAY = 300;
buttonPadding = getButtonPadding(SMALL_BUTTON_HEIGHT, SMALL_BUTTON_ICON_SIZE);
buttonPadding2 = getButtonPadding(MEDIUM_BUTTON_HEIGHT, MEDIUM_BUTTON_ICON_SIZE);
buttonPadding3 = getButtonPadding(LARGE_BUTTON_HEIGHT, LARGE_BUTTON_ICON_SIZE);
useStyles = createStyles((a0, a1) => {
  const r6 = a1 === "sm" ? {
    minHeight: SMALL_BUTTON_HEIGHT,
    minWidth: SMALL_BUTTON_HEIGHT,
    paddingHorizontal: SMALL_BUTTON_HORIZONTAL_PADDING,
    paddingVertical: buttonPadding
  } : a1 === "md" ? {
    minHeight: MEDIUM_BUTTON_HEIGHT,
    minWidth: MEDIUM_BUTTON_HEIGHT,
    paddingHorizontal: MEDIUM_BUTTON_HORIZONTAL_PADDING,
    paddingVertical: buttonPadding2
  } : a1 === "lg" ? {
    minHeight: LARGE_BUTTON_HEIGHT,
    minWidth: LARGE_BUTTON_HEIGHT,
    paddingHorizontal: LARGE_BUTTON_HORIZONTAL_PADDING,
    paddingVertical: buttonPadding3
  } : {};
  const buttonBorderRadius = getButtonBorderRadius(a1);
  return {
    pill: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
      overflow: "hidden",
      borderWidth: BUTTON_BORDER_WIDTH,
      borderRadius: buttonBorderRadius,
      ...r6
    },
    expressivePill: {
      overflow: "hidden",
      borderRadius: buttonBorderRadius
    },
    expressiveRiveFill: {
      color: Module712.colors.CONTROL_EXPRESSIVE_BACKGROUND_DEFAULT
    },
    childContainer: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
      flexGrow: 1,
      maxWidth: "100%"
    },
    ellipsis: {
      position: "absolute",
      height: "100%",
      width: "100%",
      justifyContent: "center",
      alignItems: "center"
    }
  };
});
__initData = {
  code: "function ButtonPillNativeTsx1(){const{withSpring,loading,SUBTLE_SPRING,useReducedMotion,withDelay,FADE_DELAY,offsetY}=this.__closure;const opacityTransition=withSpring(loading?0:1,SUBTLE_SPRING,'animate-always');if(useReducedMotion){return{opacity:loading?opacityTransition:withDelay(FADE_DELAY,opacityTransition),transform:[{translateY:0}]};}return{opacity:opacityTransition,transform:[{translateY:withSpring(loading?-1*offsetY:0,SUBTLE_SPRING)}]};}"
};
__initData2 = {
  code: "function ButtonPillNativeTsx2(){const{withSpring,loading,SUBTLE_SPRING,useReducedMotion,withDelay,FADE_DELAY,offsetY}=this.__closure;const opacityTransition=withSpring(loading?1:0,SUBTLE_SPRING,'animate-always');if(useReducedMotion){return{opacity:loading?withDelay(FADE_DELAY,opacityTransition):opacityTransition,transform:[{translateY:0}]};}return{opacity:opacityTransition,transform:[{translateY:withSpring(loading?0:offsetY,SUBTLE_SPRING)}]};}"
};
export function ButtonPill(props) {
  return props.loading == null ? <BasicButtonPill {...props} /> : <LoadingButtonPill {...props} />;
}
export { BasicButtonPill };
export { LoadingButtonPill };
export { useLoadingStyles };