// Metro module 13930 (f13931).
import { useState, useCallback } from "react";
import { ActivityIndicator, View } from "react-native";
import { FAMILY_CENTER_ITEMS_SHOWN_INCREMENTS, TeenActionDisplayType } from "../FamilyCenterConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useIsInAdultAgeGroup from "../hooks/useIsInAdultAgeGroup";
import { getActivityTypeTextConfigs } from "../FamilyCenterUtils";
import { useActionsForDisplayType, useFormattedTotalForDisplayType, useActionTotalsForDisplayType } from "../hooks/useFamilyCenterActivities";
import { Text } from "../../../design/components/Text/native/Text";
import { useFamilyCenterActions } from "../hooks/useFamilyCenterActions";
import { intl } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import FamilyCenterActivityRow from "./FamilyCenterActivityRow";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
let useStyles, useStyles2;
const FamilyCenterActivitySectionHeader = function FamilyCenterActivitySectionHeader(props) {
  let r31;
  const displayType2 = props.displayType;
  const styles = useStyles();
  let r17 = useIsInAdultAgeGroup();
  const r11 = getActivityTypeTextConfigs().get(displayType2);
  const actionsForDisplayType = useActionsForDisplayType(displayType2);
  const formattedTotalForDisplayType = useFormattedTotalForDisplayType(displayType2);
  if (!(displayType2 !== TeenActionDisplayType.PURCHASES && displayType2 !== TeenActionDisplayType.GIFTS)) {
    r31 = formattedTotalForDisplayType;
    if (r31 === null) {
      r31 = actionsForDisplayType.length;
    }
  } else {
    r31 = actionsForDisplayType.length;
  }
  const r34 = r11 == null ? void 0 : r11.sectionHeader(r31);
  const sectionDescription = r11?.sectionDescription;
  let r38 = null;
  if (sectionDescription !== void 0) {
    const r39 = r11 == null;
    let r40 = void 0;
    if (!r39) {
      if (r17 == null) {
        r17 = false;
      }
      r40 = r11.sectionDescription(r17);
    }
    r38 = r40;
  }
  return <View>
    <Text variant="text-sm/semibold" style={styles.header}>{r34}</Text>
    {r38 !== null ? <Text variant="text-sm/medium" color="text-muted" style={styles.description}>{r38}</Text> : null}
  </View>;
};
useStyles = createStyles({
  header: {
    marginBottom: Module712.space.PX_4
  },
  description: {
    marginBottom: Module712.space.PX_8
  }
});
useStyles2 = createStyles({
  container: {
    display: "flex"
  },
  loadMoreContainer: {
    display: "flex",
    flexDirection: "row",
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  },
  loadMore: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    borderBottomRightRadius: Module712.radii.sm,
    borderBottomLeftRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
    width: "60%"
  },
  loadMoreButton: {
    paddingVertical: 4
  }
});
export default function FamilyCenterActivitySection(props) {
  const displayType = props.displayType;
  const styles2 = useStyles2();
  const actionsForDisplayType = useActionsForDisplayType(displayType);
  const actionTotalsForDisplayType = useActionTotalsForDisplayType(displayType);
  const familyCenterActions = useFamilyCenterActions({});
  const { loadMore, isMoreLoading } = familyCenterActions;
  const [state, setState] = useState(FAMILY_CENTER_ITEMS_SHOWN_INCREMENTS);
  const r38 = actionsForDisplayType.slice(0, state);
  const callback = useCallback(() => {
    setState((prevState) => prevState + FAMILY_CENTER_ITEMS_SHOWN_INCREMENTS);
    loadMore(displayType);
  }, [loadMore, displayType]);
  if (actionsForDisplayType.length === 0) {
    return null;
  }
  const accessibilityLabel = intl.formatToPlainString(FamilyCenter_messages["7dMmJY"], {
    pageSize: Math.min(actionTotalsForDisplayType - r38.length, FAMILY_CENTER_ITEMS_SHOWN_INCREMENTS)
  });
  return <View style={styles2.container}>
    <FamilyCenterActivitySectionHeader displayType={displayType} />
    {r38.map((item) => <FamilyCenterActivityRow key={item.event_id} action={item} />)}
    {r38.length < actionTotalsForDisplayType ? <View style={styles2.loadMoreContainer}>
      {isMoreLoading ? <View style={styles2.loadMore}>
        <ActivityIndicator style={styles2.loadMoreButton} animating color="#fff" size="small" />
      </View> : <PressableOpacity style={styles2.loadMore} accessibilityLabel={accessibilityLabel} accessibilityRole="button" onPress={callback}>
        <Text style={styles2.loadMoreButton} variant="text-xs/semibold" color="text-overlay-light">{accessibilityLabel}</Text>
      </PressableOpacity>}
    </View> : null}
  </View>;
};