// Metro module 5202 (f5203).
import { useState, useRef, useEffect, useMemo } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import EmojiStore from "../../emojis/EmojiStore";
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useAnimatedStyle, useSharedValue } from "../../reanimated/ReanimatedRexport";
import * as _timing from "../../../design/animation/reanimated/timing/timing";
import * as _spring from "../../../design/animation/reanimated/spring/spring";
import useGuildRoleMemberCounts from "../../guild_role_subscriptions/useGuildRoleMemberCounts";
import { AccessibilityAnnouncer } from "../../../_bundle/Module3902";
import { intl, t } from "../../../intl/index.native";
import { useToken } from "../../../design/tokens/native/useToken";
import { useCheckboxA11yNative } from "../../../_bundle/Module3907";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import Emoji from "../../emojis/native/Emoji";
import AvatarUtils from "../../../utils/AvatarUtils";
import { Text } from "../../../design/components/Text/native/Text";
import { CheckmarkSmallIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallIcon";
import { TextBadge, BadgeColors } from "../../../design/void/native";
const useStyles = createStyles({
  container: {
    borderRadius: Module712.radii.md,
    borderWidth: 2,
    borderStyle: "solid",
    marginBottom: 8
  },
  optionButton: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    display: "flex",
    flexDirection: "row",
    alignItems: "center"
  },
  optionTextEmoji: {
    fontSize: 24,
    lineHeight: 24,
    marginRight: 12,
    paddingTop: 5
  },
  optionImageEmoji: {
    height: 24,
    width: 24,
    marginRight: 12
  },
  optionText: {
    flexShrink: 1
  },
  checkIcon: {
    position: "absolute",
    top: -6,
    right: -6,
    width: 20,
    height: 20,
    backgroundColor: Module712.colors.BACKGROUND_BRAND,
    borderRadius: 10,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  newBadgeWrapper: {
    position: "absolute",
    top: -6,
    right: -6
  },
  newBadge: {
    fontWeight: "bold"
  },
  roleCount: {
    position: "absolute",
    top: -6,
    right: 24,
    paddingVertical: 2,
    paddingHorizontal: 6,
    backgroundColor: Module712.colors.BACKGROUND_BRAND,
    borderRadius: 10,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }
});
const __initData = {
  code: "function GuildOnboardingPromptOptionButtonTsx1(){const{selected,withTiming,Easing,useReducedMotion,withSequence,withSpring}=this.__closure;const rawOpacity=selected?1:0;const opacity=withTiming(rawOpacity,{duration:150,easing:Easing.out(Easing.ease)});const rawScale=selected?1:0.7;const scale=useReducedMotion?rawScale:withSequence(withSpring(rawScale*1.2,{stiffness:80,damping:6,mass:0.3}),withSpring(rawScale,{stiffness:80,damping:6,mass:0.3}));return{opacity:opacity,transform:[{scale:scale}]};}"
};
const __initData2 = {
  code: "function GuildOnboardingPromptOptionButtonTsx2(){const{showMemberCount,withDelay,withTiming,Easing,useReducedMotion}=this.__closure;const rawOpacity=showMemberCount?1:0;const opacity=withDelay(showMemberCount?400:0,withTiming(rawOpacity,{duration:150,easing:Easing.out(Easing.ease)}));const rawTranslate=showMemberCount?0:16;const translateX=useReducedMotion?rawTranslate:withDelay(showMemberCount?400:0,withTiming(rawTranslate,{duration:200,easing:Easing.out(Easing.ease)}));return{opacity:opacity,transform:[{translateX:translateX}]};}"
};
const __initData3 = {
  code: "function GuildOnboardingPromptOptionButtonTsx3(){const{useReducedMotion,Easing,withTiming,selected,selectedBorderColor,isNew,unselectedBrandBorderColor,unselectedBorderColor,selectedBackgroundColor}=this.__closure;const timing=useReducedMotion?{duration:0}:{duration:200,easing:Easing.out(Easing.ease)};return{borderColor:withTiming(selected?selectedBorderColor:isNew?unselectedBrandBorderColor:unselectedBorderColor,timing),backgroundColor:withTiming(selected?selectedBackgroundColor:'transparent',timing)};}"
};
const __initData4 = {
  code: "function GuildOnboardingPromptOptionButtonTsx4(){const{useReducedMotion,scale}=this.__closure;return useReducedMotion?{}:{transform:[{scale:scale.get()}]};}"
};
export default function PromptOptionButton(props) {
  let stateFromStores, c14756_5, memberCount, state, setState, ref, ref2, sharedValue, isUnseen, c14756_13, token, token2, token3, token4;
  const { guildId, option, selected, onSelect, suppressMemberCount } = props;
  let canBeNew = props.canBeNew;
  stateFromStores = void 0;
  c14756_5 = void 0;
  memberCount = void 0;
  state = void 0;
  setState = void 0;
  ref = void 0;
  ref2 = void 0;
  sharedValue = void 0;
  isUnseen = void 0;
  c14756_13 = void 0;
  token = void 0;
  token2 = void 0;
  token3 = void 0;
  token4 = void 0;
  const styles = useStyles();
  const stateFromStores2 = useStateFromStores([EmojiStore], () => (option == null ? void 0 : option.emoji?.id) != null ? EmojiStore.getUsableCustomEmojiById(option == null ? void 0 : option.emoji?.id) : null);
  stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const R = function R() {
    const opacity = _timing.withTiming(selected ? 1 : 0, {
      duration: 150,
      easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
    });
    const r22 = selected ? 1 : 0.7;
    return {
      opacity,
      transform: [{
        scale: stateFromStores ? r22 : _ReanimatedRexport.withSequence(_spring.withSpring(1.2 * r22, {
          stiffness: 80,
          damping: 6,
          mass: 0.3
        }), _spring.withSpring(r22, {
          stiffness: 80,
          damping: 6,
          mass: 0.3
        }))
      }]
    };
  };
  R.__closure = {
    selected,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing,
    useReducedMotion: stateFromStores,
    withSequence: _ReanimatedRexport.withSequence,
    withSpring: _spring.withSpring
  };
  R.__workletHash = 8281627194581;
  R.__initData = __initData;
  const animatedStyle = useAnimatedStyle(R);
  const guildRoleMemberCounts = useGuildRoleMemberCounts(guildId);
  c14756_5 = guildRoleMemberCounts;
  const r3 = guildRoleMemberCounts == null;
  let r28 = 0;
  if (!r3) {
    const r71 = option.roleIds == null;
    r28 = 0;
    if (!r71) {
      const r73 = Math;
      r28 = r73.max.apply(r73, [...option.roleIds.map((roleId) => c14756_5[roleId])]);
    }
  }
  memberCount = r28;
  [state, setState] = useState(false);
  ref = useRef(null);
  useEffect(() => {
    if (state) {
      ref.current = setTimeout(() => {
        setState(false);
        ref.current = null;
      }, 3000);
      return () => {
        if (ref.current != null) {
          clearTimeout(ref.current);
        }
      };
    }
  }, [state]);
  ref2 = useRef(false);
  useEffect(() => {
    if (state && (!ref2.current && memberCount > 0)) {
      AccessibilityAnnouncer.announce(intl.formatToPlainString(t.iyXfAn, {
        memberCount
      }), "polite");
      ref2.current = true;
    } else if (!state) {
      ref2.current = false;
    }
  }, [state, memberCount]);
  const G = function G() {
    const opacity = _ReanimatedRexport.withDelay(state ? 400 : 0, _timing.withTiming(state ? 1 : 0, {
      duration: 150,
      easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
    }));
    const r28 = state ? 0 : 16;
    return {
      opacity,
      transform: [{
        translateX: stateFromStores ? r28 : _ReanimatedRexport.withDelay(state ? 400 : 0, _timing.withTiming(r28, {
          duration: 200,
          easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
        }))
      }]
    };
  };
  G.__closure = {
    showMemberCount: state,
    withDelay: _ReanimatedRexport.withDelay,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing,
    useReducedMotion: stateFromStores
  };
  G.__workletHash = 9518487706997;
  G.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(G);
  sharedValue = useSharedValue(1);
  isUnseen = canBeNew ? option.isUnseen : canBeNew;
  const r127 = (option == null ? void 0 : option.emoji?.id) != null || (option == null ? void 0 : option.emoji?.name) != null;
  c14756_13 = r127;
  const memo = useMemo(() => {
    if (c14756_13) {
      let r30 = option.emoji?.name;
      if (r30 == null) {
        r30 = "";
      }
      const emojiName = r30.replace(/^:|:$/g, "");
      return option.description != null && option.description.length > 0 ? intl.formatToPlainString(t.nSzqkg, {
        emojiName,
        title: option.title,
        description: option.description
      }) : intl.formatToPlainString(t.rBPpAN, {
        emojiName,
        title: option.title
      });
    }
    return option.description != null && option.description.length > 0 ? intl.formatToPlainString(t.U4lDOC, {
      title: option.title,
      description: option.description
    }) : option.title;
  }, [r127, option.emoji?.name, option.title, option.description]);
  token = useToken(Module712.colors.BACKGROUND_BRAND);
  token2 = useToken(Module712.colors.BORDER_SUBTLE);
  token3 = useToken(Module712.colors.BORDER_STRONG);
  token4 = useToken(Module712.colors.BACKGROUND_BASE_LOWEST);
  const H = function H() {
    const r5 = stateFromStores ? {
      duration: 0
    } : {
      duration: 200,
      easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
    };
    return {
      borderColor: _timing.withTiming(selected ? token3 : isUnseen ? token : token2, r5),
      backgroundColor: _timing.withTiming(selected ? token4 : "transparent", r5)
    };
  };
  H.__closure = {
    useReducedMotion: stateFromStores,
    Easing: _ReanimatedRexport.Easing,
    withTiming: _timing.withTiming,
    selected,
    selectedBorderColor: token3,
    isNew: isUnseen,
    unselectedBrandBorderColor: token,
    unselectedBorderColor: token2,
    selectedBackgroundColor: token4
  };
  H.__workletHash = 17180171486485;
  H.__initData = __initData3;
  const animatedStyle3 = useAnimatedStyle(H);
  const q = function q() {
    return stateFromStores ? {} : {
      transform: [{
        scale: sharedValue.get()
      }]
    };
  };
  q.__closure = {
    useReducedMotion: stateFromStores,
    scale: sharedValue
  };
  q.__workletHash = 319662489785;
  q.__initData = __initData4;
  const animatedStyle4 = useAnimatedStyle(q);
  const checkboxA11yNative = useCheckboxA11yNative({
    checked: selected
  });
  const props2 = {
    activeOpacity: 0.6,
    style: [styles.optionButton],
    onPress: function onPress() {
      onSelect(!selected);
      if (!suppressMemberCount) {
        setState(!selected);
      }
    },
    onPressIn: function onPressIn() {
      sharedValue.set(_ReanimatedRexport.withSequence(_timing.withTiming(1, {
        duration: 0
      }), _timing.withTiming(1.02, {
        duration: 200,
        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
      })));
    },
    onPressOut: function onPressOut() {
      sharedValue.set(_timing.withTiming(1, {
        duration: 100,
        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
      }));
    },
    accessibilityRole: checkboxA11yNative.accessibilityRole,
    accessibilityState: checkboxA11yNative.accessibilityState,
    accessibilityLabel: memo,
    children: null
  };
  let r217 = (option == null ? void 0 : option.emoji?.id) != null || (option == null ? void 0 : option.emoji?.name) != null;
  if (r217) {
    const src = stateFromStores2 != null ? AvatarUtils.getEmojiURL({
      id: stateFromStores2.id,
      animated: stateFromStores2.animated,
      size: EMOJI_URL_BASE_SIZE
    }) : void 0;
    let name = option == null ? void 0 : option.emoji?.name;
    if (name == null) {
      name = "";
    }
    r217 = <View style={{
      display: "flex",
      alignItems: "center"
    }}>
      <Emoji textEmojiStyle={styles.optionTextEmoji} fastImageStyle={styles.optionImageEmoji} src={src} name={name} />
    </View>;
  }
  props2.children = [r217, <View style={styles.optionText}>
    <Text variant="text-md/semibold" color="mobile-text-heading-primary">{option.title}</Text>
    {option.description != null && option.description.length > 0 && <Text variant="text-xs/medium" color="text-default">{option.description}</Text>}
  </View>];
  const r266 = [<PressableOpacity {...props2} />, memberCount > 0 ? <ReanimatedRexport.View accessible={false} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden style={[styles.roleCount, animatedStyle2]}>
    <Text variant="text-xs/semibold" color="text-overlay-light">
      {intl.format(t.EgKsZA, {
        memberCount
      })}
    </Text>
  </ReanimatedRexport.View> : null, <ReanimatedRexport.View style={[styles.checkIcon, animatedStyle]}>
    <CheckmarkSmallIcon size="xs" color={Module712.colors.WHITE} />
  </ReanimatedRexport.View>, ,];
  if (canBeNew) {
    canBeNew = !selected;
  }
  if (canBeNew) {
    canBeNew = option.isUnseen;
  }
  if (canBeNew) {
    canBeNew = <TextBadge color={BadgeColors.BRAND} text={intl.string(t.y2b7CA)} style={styles.newBadgeWrapper} textStyle={styles.newBadge} />;
  }
  r266[3] = canBeNew;
  return <ReanimatedRexport.View style={[animatedStyle4, animatedStyle3, styles.container]}>{r266}</ReanimatedRexport.View>;
};