// Metro module 15280 (f15281).
import { useCallback, useEffect } from "react";
import { View } from "react-native";
import { AnalyticEvents, NOOP } from "../../../Constants";
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
import { EventActionLocation, EventActionType, NotificationNudgeAnalyticsAction, NotificationNudgeSurface } from "../../nuf/native/components/notification/NotificationPermissionConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { BellSlashIcon } from "../../../design/components/Icon/native/redesign/generated/BellSlashIcon";
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 { requestPushNotificationPermission, useCanSeePushNotificationNudge } from "../../nuf/native/NotificationPermissionUtil";
import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
import ContextualOptInNudgeHoldoutExperiment from "../../nuf/native/ContextualOptInNudgeHoldoutExperiment";
import { useSelectedTimeRecurringDismissibleContent } from "../../dismissible_content/hooks/useSelectedDismissibleContent";
import { DismissibleContent } from "../../../_bundle/Module1358";
let useStyles;
const NotificationCenterBannerImpl = function NotificationCenterBannerImpl(props) {
  const onDismiss = props.onDismiss;
  const styles = useStyles();
  useEffect(() => {
    AnalyticsUtils.track(AnalyticEvents.CONTEXTUAL_REMINDER_ACTION, {
      action: NotificationNudgeAnalyticsAction.IMPRESSION,
      prompt_type: NotificationNudgeSurface.NOTIFICATION_CENTER_BANNER
    });
  }, []);
  return <View style={styles.container}>
    <View style={styles.iconContainer}>
      <BellSlashIcon size="md" color={Module712.colors.ICON_STRONG} />
    </View>
    <View style={styles.contentContainer}>
      <Text variant="text-md/semibold" color="text-default">
        {intl.string(t.G6YBna)}
      </Text>
      <Text variant="text-md/medium" color="text-muted" style={{
        marginTop: Module712.space.PX_4
      }}>
        {intl.string(t["9CoPDE"])}
      </Text>
      <View style={styles.ctaButton}>
        <Button variant="primary" size="md" text={intl.string(t.a4bgO0)} onPress={function onPress() {
          requestPushNotificationPermission(EventActionType.ALLOW_TO_REQUEST, EventActionLocation.NOTIFICATION_CENTER, NOOP);
          AnalyticsUtils.track(AnalyticEvents.CONTEXTUAL_REMINDER_ACTION, {
            action: NotificationNudgeAnalyticsAction.ACCEPT,
            prompt_type: NotificationNudgeSurface.NOTIFICATION_CENTER_BANNER
          });
        }} />
      </View>
    </View>
    <PressableHighlight onPress={function onPress() {
      AnalyticsUtils.track(AnalyticEvents.CONTEXTUAL_REMINDER_ACTION, {
        action: NotificationNudgeAnalyticsAction.DISMISS,
        prompt_type: NotificationNudgeSurface.NOTIFICATION_CENTER_BANNER
      });
      onDismiss();
    }} hitSlop={8} accessibilityRole="button" accessibilityLabel={intl.string(t.WAI6xu)}>
      <XSmallIcon size="sm" color="icon-strong" />
    </PressableHighlight>
  </View>;
};
useStyles = createStyles({
  container: {
    flexDirection: "row",
    paddingLeft: 24,
    paddingRight: Module712.space.PX_12,
    paddingVertical: Module712.space.PX_16,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    alignItems: "flex-start",
    borderBottomWidth: 1,
    borderColor: Module712.colors.BORDER_SUBTLE,
    gap: 16
  },
  contentContainer: {
    flex: 1
  },
  iconContainer: {
    width: 48,
    height: 48,
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
    alignItems: "center",
    justifyContent: "center"
  },
  ctaButton: {
    alignSelf: "flex-start",
    marginTop: Module712.space.PX_12
  }
});
export default function NotificationCenterPermissionNudge() {
  const inHoldout = ContextualOptInNudgeHoldoutExperiment.useConfig({
    location: "NotificationCenterPermissionNudge"
  }).inHoldout;
  const canSeePushNotificationNudge = useCanSeePushNotificationNudge();
  const r8 = inHoldout ? null : canSeePushNotificationNudge ? DismissibleContent.NOTIFICATION_NUDGE_NOTIFICATION_CENTER_BANNER : null;
  const [r28, r29] = useSelectedTimeRecurringDismissibleContent(r8, {
    cooldownDurationMs: 604800000
  });
  let c21840_0 = r29;
  const callback = useCallback(() => c21840_0(ContentDismissActionType.USER_DISMISS), [r29]);
  return r28 === DismissibleContent.NOTIFICATION_NUDGE_NOTIFICATION_CENTER_BANNER ? <NotificationCenterBannerImpl onDismiss={callback} /> : null;
};