// Metro module 9938 (f9939).
import { useState, useEffect, useCallback, memo } from "react";
import { View } from "react-native";
import SavedMessagesStore from "../SavedMessagesStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import { withSpring } from "../../../design/animation/reanimated/spring/spring";
import useSavedMessagesForPage from "../useSavedMessagesForPage";
import { useStateFromStores } from "../../../_bundle/Module589";
import useTrackImpression from "../../app_analytics/useTrackImpression";
import { ImpressionTypes, ImpressionNames } from "../../../_bundle/Module503";
import Durations from "../../../utils/Durations";
import ForLaterMessageCard from "./ForLaterMessageCard";
import { ForLaterEmptyState } from "./ForLaterEmptyState";
import { FlashList } from "../../../_bundle/noop_6676";
let useStyles, __initData, ForLaterPage;
const keyExtractor = function keyExtractor(a0) {
  return a0.saveData.messageId;
};
ForLaterPage = function ForLaterPage(props) {
  let state, setState;
  const { type, handleScroll } = props;
  state = void 0;
  setState = void 0;
  const styles = useStyles();
  const savedMessagesForPage = useSavedMessagesForPage(type);
  const stateFromStores = useStateFromStores([SavedMessagesStore], () => SavedMessagesStore.getOverdueMessageReminderCount());
  useTrackImpression({
    type: ImpressionTypes.MODAL,
    name: ImpressionNames.FOR_LATER_LIST_VIEWED,
    properties: {
      total_count: savedMessagesForPage.length,
      overdue_count: stateFromStores
    }
  }, {}, [savedMessagesForPage.length, stateFromStores]);
  [state, setState] = useState(new Date());
  useEffect(() => {
    let c26569_0 = setInterval(() => setState(new Date()), Durations.Millis.MINUTE);
    return () => {
      clearInterval(c26569_0);
    };
  }, []);
  const callback = useCallback((a0) => <ForLaterMessageCard savedMessage={a0.item} throttledNow={state} />, [state]);
  return savedMessagesForPage.length === 0 ? <ForLaterEmptyState type={type} /> : <FlashList data={savedMessagesForPage} renderItem={callback} contentContainerStyle={styles.cardContainer} keyExtractor={keyExtractor} onScroll={handleScroll} />;
};
useStyles = createStyles({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
    flexGrow: 1
  },
  headerBorder: {
    height: 1,
    width: "100%",
    backgroundColor: Module712.colors.BORDER_SUBTLE
  },
  cardContainer: {
    paddingHorizontal: 16,
    paddingVertical: 8
  }
});
__initData = {
  code: "function ForLaterScreenTsx1(){const{borderOpacity}=this.__closure;return{opacity:borderOpacity.get()};}"
};
const r47 = memo(function({ type }) {
  const styles = useStyles();
  const sharedValue = useSharedValue(0);
  const callback = useCallback((a0) => {
    sharedValue.set(withSpring(a0.nativeEvent.contentOffset.y > 8 ? 1 : 0));
  }, [sharedValue]);
  const r23 = function() {
    return {
      opacity: sharedValue.get()
    };
  };
  r23.__closure = {
    borderOpacity: sharedValue
  };
  r23.__workletHash = 16693192032676;
  r23.__initData = __initData;
  return <View style={styles.container}>
    <ReanimatedRexport.View style={[styles.headerBorder, useAnimatedStyle(r23)]} />
    <ForLaterPage type={type} handleScroll={callback} />
  </View>;
});
export default r47;