// Metro module 15754 (f15755).
import { useCallback } from "react";
import { Image as Image2, View } from "react-native";
import UserStore from "../../../stores/UserStore";
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import PremiumUtils from "../../../utils/PremiumUtils";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import Module15755 from "../../../_bundle/Module15755";
import { Icon, IconSizes } from "../../../design/void/native";
import Module9406 from "../../../_bundle/Module9406";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import { navigateToAppIconSettings } from "./AppIconUtils";
const useStyles = createStyles({
  container: {
    padding: Module712.space.PX_16,
    paddingBottom: 0
  },
  info: {
    alignItems: "center"
  },
  image: {
    alignSelf: "center",
    marginBottom: 20
  },
  nitroWheel: {
    marginRight: 8
  },
  titleContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center"
  },
  subtitle: {
    marginTop: 8,
    textAlign: "center"
  },
  footer: {
    marginTop: 20,
    gap: Module712.space.PX_8
  }
});
export default function AppIconsCoachmarkActionSheet(props) {
  const markAsDismissed = props.markAsDismissed;
  const styles = useStyles();
  const isPremium = PremiumUtils.isPremium(useStateFromStores([UserStore], () => UserStore.getCurrentUser()));
  const callback = useCallback(() => {
    ActionSheetActionCreators.hideActionSheet();
    if (markAsDismissed != null) {
      markAsDismissed(ContentDismissActionType.DISMISS);
    }
  }, [markAsDismissed]);
  return <BottomSheet onDismiss={() => markAsDismissed(ContentDismissActionType.DISMISS)} contentStyles={styles.container}>
    <View style={styles.info}>
      <Image2 source={Module15755} style={styles.image} />
      <View style={styles.titleContainer}>
        <Icon source={Module9406} size={IconSizes.MEDIUM} style={styles.nitroWheel} disableColor />
        <Text variant="heading-xl/extrabold" color="mobile-text-heading-primary">
          {intl.string(t.EfA4Cq)}
        </Text>
      </View>
      <Text variant="text-md/normal" color="text-default" style={styles.subtitle}>
        {isPremium ? intl.string(t.IgchKK) : intl.string(t.D0XzaS)}
      </Text>
    </View>
    <View style={styles.footer}>
      <Button text={intl.string(t.Pt547C)} onPress={function onPress() {
        ActionSheetActionCreators.hideActionSheet();
        if (markAsDismissed != null) {
          markAsDismissed(ContentDismissActionType.PRIMARY);
        }
        navigateToAppIconSettings();
      }} />
      <Button variant="secondary" text={intl.string(t.iSrIIZ)} onPress={callback} />
    </View>
  </BottomSheet>;
};