// Metro module 15764 (f15765).
import { useRef, useContext, useCallback } from "react";
import { View } from "react-native";
import UserStore from "../../../stores/UserStore";
import { Fonts, UserSettingsSections } from "../../../Constants";
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
import { AccessibilityPreferencesContext } from "../../../_bundle/Module3908";
import * as _shared from "../../../design/shared";
import useTheme from "../../../hooks/useTheme";
import { useStateFromStores } from "../../../_bundle/Module589";
import PremiumUtils from "../../../utils/PremiumUtils";
import { intl, t } from "../../../intl/index.native";
import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
import { openUserSettings } from "../../user_settings/core/native/openUserSettings";
import { runAfterInteractions } from "../../../utils/native/RunAfterInteractionsUtils";
import { UNSAFE_markDismissibleContentAsDismissed } from "../../dismissible_content/DismissibleContentUnsafeUtils";
import { DismissibleContent } from "../../../_bundle/Module1358";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import { ActionSheetHeaderBar } from "../../../design/components/Sheet/native/ActionSheetHeaderBar.native";
import { DisplayNameStylesV2AbstractUI } from "../../../design/assets/native";
import { isIOS } from "../../../utils/PlatformUtils";
import FastImage from "../../../components_native/common/FastImage";
import Module15765 from "../../../_bundle/Module15765";
import { APNGPlayer } from "../../image/native/APNGPlayer.android";
import { BetaTag } from "../../../design/void/native";
import { Text } from "../../../design/components/Text/native/Text";
import { Button } from "../../../design/components/Button/native/Button.native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
const useStyles = createStyles(() => ({
  content: {
    alignItems: "center",
    paddingHorizontal: Module712.space.PX_16
  },
  imageContainer: {
    width: "100%",
    height: 162,
    alignItems: "center",
    justifyContent: "center",
    marginVertical: Module712.space.PX_24
  },
  image: {
    width: "100%",
    height: "100%"
  },
  betaTag: {
    marginLeft: 0
  },
  title: {
    textAlign: "center",
    fontFamily: Fonts.GINTO_NORD_EXTRA_BOLD,
    textTransform: "uppercase",
    marginTop: Module712.space.PX_12,
    marginBottom: Module712.space.PX_16,
    paddingTop: Module712.space.PX_12
  },
  subtitle: {
    textAlign: "center",
    marginTop: Module712.space.PX_12,
    marginBottom: Module712.space.PX_32
  },
  actions: {
    gap: Module712.space.PX_12,
    width: "100%"
  }
}));
export default function DisplayNameStylesFlywheelMobileActionSheet(props) {
  const markAsDismissed = props.markAsDismissed;
  const ref = useRef(null);
  const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
  const isThemeDark = _shared.isThemeDark(useTheme());
  const styles = useStyles();
  const canUsePremiumProfileCustomization = PremiumUtils.canUsePremiumProfileCustomization(useStateFromStores([UserStore], () => UserStore.getCurrentUser()));
  const r17 = canUsePremiumProfileCustomization ? intl.string(DisplayNameStyles_messages.TyUdka) : intl.string(DisplayNameStyles_messages.dluV0R);
  const callback = useCallback(() => {
    openUserSettings({
      screen: canUsePremiumProfileCustomization ? UserSettingsSections.PROFILE_CUSTOMIZATION : UserSettingsSections.PROFILE_CUSTOMIZATION_TRY_IT_OUT
    }, () => {
      runAfterInteractions(() => {
        openUserSettings({
          screen: UserSettingsSections.DISPLAY_NAME_STYLES
        }, () => {
          markAsDismissed(ContentDismissActionType.TAKE_ACTION);
          UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.DISPLAY_NAME_STYLES_FLYWHEEL_MOBILE_PROFILE_COACHMARK, {
            dismissAction: ContentDismissActionType.INDIRECT_ACTION
          });
        });
      });
    });
  }, [canUsePremiumProfileCustomization, markAsDismissed]);
  const callback2 = useCallback(() => {
    markAsDismissed(ContentDismissActionType.USER_DISMISS);
  }, [markAsDismissed]);
  const callback3 = useCallback(() => {
    markAsDismissed(ContentDismissActionType.USER_DISMISS);
  }, [markAsDismissed]);
  const r84 = [<ActionSheetHeaderBar onPress={() => {
    const current = ref.current;
    if (current != null) {
      current.closeActionSheet();
    }
    markAsDismissed(ContentDismissActionType.USER_DISMISS);
  }} />, <View style={styles.imageContainer}>
    {enabled && <DisplayNameStylesV2AbstractUI resizeMode="contain" />}
    {enabled ? !enabled : isIOS() ? <FastImage source={{
      uri: Module15765
    }} style={styles.image} resizeMode="contain" enableAnimation={!enabled} /> : <APNGPlayer url={Module15765} style={styles.image} autoplay />}
  </View>, <BetaTag style={styles.betaTag} />, , , ,];
  let color = "text-overlay-dark";
  r84[3] = <Text variant="display-md" style={styles.title} color={isThemeDark ? "text-overlay-light" : "text-overlay-dark"}>
    {intl.string(DisplayNameStyles_messages.Uzms61)}
  </Text>;
  if (isThemeDark) {
    color = "text-overlay-light";
  }
  r84[4] = <Text variant="text-lg/medium" style={styles.subtitle} color={color}>{r17}</Text>;
  r84[5] = <View style={styles.actions}>
    <Button text={intl.string(t["4P5I8V"])} variant="primary" size="lg" onPress={callback} />
    <Button text={intl.string(t.TulDPl)} variant="secondary" size="lg" onPress={callback2} />
  </View>;
  return <BottomSheet ref={ref} onDismiss={callback3} startExpanded handleDisabled>
    <SafeAreaPaddingView bottom>
      <View style={styles.content}>{r84}</View>
    </SafeAreaPaddingView>
  </BottomSheet>;
};