// Metro module 15274 (f15275).
import { forwardRef, useCallback } from "react";
import { View } from "react-native";
import SavedMessagesStore from "../SavedMessagesStore";
import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
import { ICON_SIZE } from "../../../_bundle/Module15275";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useTheme from "../../../hooks/useTheme";
import { useToken } from "../../../design/tokens/native/useToken";
import { useIconSizeStyles } from "../../../design/components/Button/native/ButtonHooks.native";
import { SavedMessageSortTypes } from "../SavedMessagesTypes";
import { ClockIcon } from "../../../design/components/Icon/native/redesign/generated/ClockIcon";
import { BookmarkIcon } from "../../../design/components/Icon/native/redesign/generated/BookmarkIcon";
import { useStateFromStores } from "../../../_bundle/Module589";
import hasForLaterPremiumType from "../hasForLaterPremiumType";
import openPremiumUpsellActionSheet from "../../premium/roadblocks/native/utils/openPremiumUpsellActionSheet";
import { EntitlementFeatureNames } from "../../../_bundle/Module6201";
import { showForLaterModal } from "./showForLaterModal";
import { IconButton } from "../../../design/components/Button/native/IconButton.native";
import { intl, t } from "../../../intl/index.native";
let c10852_8, useStyles;
const BadgedIcon = function BadgedIcon(props) {
  const { type: type2, showRedDot } = props;
  const token = useToken(Module712.colors.INTERACTIVE_TEXT_DEFAULT, useTheme());
  const styles = useStyles();
  const styles2 = useIconSizeStyles("sm", true, 2);
  const Component = type2 === SavedMessageSortTypes.REMINDER ? ClockIcon : BookmarkIcon;
  return <View style={[styles.container, styles2]}>
    {showRedDot ? <View style={styles.iconAnchor}>
      <ClipView cutouts={[c10852_8]}>
        <Component size="sm" color={token} />
      </ClipView>
      <View style={styles.dot} />
    </View> : <Component size="sm" color={token} />}
  </View>;
};
c10852_8 = {
  shape: CutoutShape.Circle,
  x: ICON_SIZE.sm - 9,
  y: -1,
  size: 10
};
useStyles = createStyles({
  container: {
    aspectRatio: 1,
    alignItems: "center",
    justifyContent: "center",
    position: "relative"
  },
  iconAnchor: {
    width: ICON_SIZE.sm,
    height: ICON_SIZE.sm,
    position: "relative"
  },
  dot: {
    position: "absolute",
    height: 6.5,
    width: 6.5,
    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_NOTIFICATION,
    borderRadius: Module712.radii.lg,
    right: 1,
    top: 0.7
  }
});
const r62 = forwardRef(function({ type, onOpen }, a1) {
  let stateFromStores;
  stateFromStores = void 0;
  const stateFromStores2 = useStateFromStores([SavedMessagesStore], () => SavedMessagesStore.hasOverdueReminder(), []);
  stateFromStores = useStateFromStores([SavedMessagesStore], () => SavedMessagesStore.getSavedMessageCount());
  return <View ref={a1}>
    <IconButton variant="tertiary" size="sm" icon={<BadgedIcon type={type} showRedDot={type === SavedMessageSortTypes.REMINDER && stateFromStores2} />} onPress={useCallback(() => {
      onOpen();
      if (stateFromStores === 0 && !hasForLaterPremiumType()) {
        openPremiumUpsellActionSheet(EntitlementFeatureNames.SAVED_MESSAGES);
      } else {
        showForLaterModal(type);
      }
    }, [onOpen, stateFromStores, type])} accessibilityLabel={intl.string(type === SavedMessageSortTypes.REMINDER ? t.aUXxzT : t["2pAkDA"])} maxFontSizeMultiplier={2} />
  </View>;
});
export default r62;