// Metro module 9628 (f9629).
import { memo, useState, useRef, useEffect } from "react";
import { MIN_MARGIN, STICKER_SIZE } from "./StickerPickerConstants";
import { AnalyticEvents } from "../../../Constants";
import { ACTION_SHEET_MAX_WIDTH } from "../../action_sheet/native/ActionSheetConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import Module12 from "../../../_bundle/Module12";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import StickerPackHeader from "./StickerPackHeader";
import StickerPackInformationPopout, { doesStickerPackHavePopoutInformation } from "./StickerPackInformationPopout";
import { ActionSheetHeaderBar } from "../../../design/components/Sheet/native/ActionSheetHeaderBar.native";
import { BottomSheetScrollView } from "../../../_bundle/Module5245";
import StickerPickerListRow from "./StickerPickerListRow";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import Sticker from "./Sticker";
const useStyles = createStyles({
  focusedStickerPreviewContainer: {
    position: "absolute",
    left: 0,
    top: 0,
    height: "100%",
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "rgba(0, 0, 0, 0.85)"
  },
  header: {
    marginHorizontal: 16,
    marginVertical: 8,
    backgroundColor: "transparent",
    height: void 0
  },
  stickers: {
    paddingHorizontal: 16,
    marginBottom: 16
  },
  popoutContainer: {
    position: "absolute",
    bottom: 50
  }
});
const r43 = memo(function StickerPackDetailActionSheet(props) {
  let setState, state, setState2, ref, containerWidth, ref2;
  const { stickerPack, analyticsPopoutType, onClose } = props;
  setState = void 0;
  state = void 0;
  setState2 = void 0;
  ref = void 0;
  containerWidth = void 0;
  ref2 = void 0;
  const onPressSticker2 = function onPressSticker(a0) {
    setState(a0);
  };
  const toggleDisplayingPackDetails = function toggleDisplayingPackDetails() {
    if (ref.current != null) {
      clearTimeout(ref.current);
    }
    setState2(!state);
    if (!state) {
      ref.current = setTimeout(() => setState2(false), 4000);
    }
  };
  const styles = useStyles();
  const width = useWindowDimensions_native().width;
  let sticker;
  [sticker, setState] = useState(null);
  let state2;
  [state2, setState2] = useState(false);
  state = state2;
  ref = useRef(null);
  const bottom = useSafeAreaInsets_native().bottom;
  containerWidth = Math.floor(Math.min(ACTION_SHEET_MAX_WIDTH, width) / (STICKER_SIZE + MIN_MARGIN));
  const r55 = Module12.chunk(stickerPack.stickers, containerWidth);
  ref2 = useRef(onClose);
  useEffect(() => {
    ref2.current = onClose;
  }, [onClose]);
  useEffect(() => () => {
    const current = ref2.current;
    return current == null ? void 0 : current.call(ref2);
  }, []);
  useEffect(() => {
    AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
      type: analyticsPopoutType,
      sticker_pack_id: stickerPack.id
    });
  }, [analyticsPopoutType, stickerPack.id]);
  const r109 = [<BottomSheet scrollable startExpanded handleDisabled header={<>
    <StickerPackHeader stickerPack={stickerPack} style={styles.header} onPress={doesStickerPackHavePopoutInformation(stickerPack) ? toggleDisplayingPackDetails : void 0} withBanner withDescription />
    <ActionSheetHeaderBar variant="floating" />
  </>}>
    <BottomSheetScrollView style={styles.stickers} contentContainerStyle={{
      paddingBottom: 32 + bottom
    }}>
      {r55.map((item, index) => <StickerPickerListRow key={index} containerWidth={containerWidth} stickers={item} rowSize={containerWidth} onPressSticker={onPressSticker2} nativeRow={false} />)}
    </BottomSheetScrollView>
  </BottomSheet>, sticker != null && <PressableOpacity accessibilityRole="none" style={styles.focusedStickerPreviewContainer} onPress={() => setState(null)}>
    <Sticker sticker={sticker} size={128} />
  </PressableOpacity>, ,];
  if (state) {
    state2 = <StickerPackInformationPopout stickerPack={stickerPack} style={styles.popoutContainer} onClose={toggleDisplayingPackDetails} />;
  }
  r109[2] = state2;
  return <>{r109}</>;
});
export default r43;