// Metro module 9649 (f9650).
import { useState, useEffect } from "react";
import { View } from "react-native";
import StickersStore from "../StickersStore";
import { EMPTY_STATE_STICKERS } from "../StickersConstants";
import { AnalyticEvents, AnalyticsSections } from "../../../Constants";
import { PremiumUpsellTypes } from "../../premium/PremiumConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { useShouldAnimateSticker, useFetchStickerPacks } from "../StickersHooks";
import Sticker from "./Sticker";
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
import { useStateFromStoresArray } from "../../../_bundle/Module589";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { triggerHapticFeedback } from "../../haptics/HapticUtils.native";
import HapticFeedbackTypes from "../../haptics/HapticFeedbackTypes";
import { Button } from "../../../design/components/Button/native/Button.native";
import FastImage from "../../../components_native/common/FastImage";
import Module9377 from "../../../_bundle/Module9377";
import openStickersPremiumUpsellAlert from "./premium/openStickersPremiumUpsellAlert";
let useStyles;
const EmptyStateSticker = function EmptyStateSticker(props) {
  const sticker = props.sticker;
  return <Sticker key={sticker?.id} sticker={sticker} size={60} animated={useShouldAnimateSticker(props.isFocused)} />;
};
useStyles = createStyles({
  header: {
    marginBottom: 8,
    textAlign: "center"
  },
  blurb: {
    lineHeight: 18,
    textAlign: "center",
    marginBottom: 12
  },
  premiumButton: {
    marginTop: 20,
    alignSelf: "center",
    paddingLeft: 5,
    paddingRight: 10,
    flexGrow: 0
  },
  nitroWheel: {
    width: 32
  },
  stickersRow: {
    flexDirection: "row",
    alignSelf: "center"
  },
  sticker: {
    paddingHorizontal: 2
  }
});
export default () => {
  const styles = useStyles();
  useFetchStickerPacks();
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EMPTY_STATE).analyticsLocations;
  const stateFromStoresArray = useStateFromStoresArray([StickersStore], () => EMPTY_STATE_STICKERS.map((item) => StickersStore.getStickerById(item)).filter((item) => item != null));
  const [state, setState] = useState(null);
  useEffect(() => {
    AnalyticsUtils.track(AnalyticEvents.PREMIUM_UPSELL_VIEWED, {
      type: PremiumUpsellTypes.EMPTY_STICKER_PICKER_UPSELL,
      source: {
        section: AnalyticsSections.EMPTY_STICKER_PICKER_UPSELL
      },
      location_stack: analyticsLocations
    });
  }, [analyticsLocations]);
  return <View>
    <Text style={styles.header} accessibilityRole="header" variant="heading-lg/extrabold" color="mobile-text-heading-primary">
      {intl.string(t.HEm04J)}
    </Text>
    <Text style={styles.blurb} variant="text-sm/medium" color="text-default">
      {intl.string(t.FnNud4)}
    </Text>
    <View style={styles.stickersRow}>
      {stateFromStoresArray.map((item) => {
        return <PressableOpacity key={item?.id} accessible={false} onLongPress={() => {
          triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
          setState(item.id);
        }} style={styles.sticker}>
          <EmptyStateSticker sticker={item} isFocused={state === item.id} />
        </PressableOpacity>;
      })}
    </View>
    <View style={styles.premiumButton}>
      <Button icon={<FastImage source={Module9377} style={styles.nitroWheel} resizeMode="contain" />} text={intl.string(t.pj0XBN)} variant="active" size="sm" onPress={() => openStickersPremiumUpsellAlert({
        section: AnalyticsSections.EXPRESSION_PICKER
      })} />
    </View>
  </View>;
};