// Metro module 7975 (f7976).
import * as Module19 from "react";
import { useState, useCallback, useMemo } from "react";
import { ActivityIndicator, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { GUTTER_SIZE, ROW_SIZE } from "./useCollectibleListLayout";
import { Heading } from "../../../design/components/Text/native/Text";
import { chunk } from "../../../_bundle/Module12";
import { BottomSheetFlashList } from "../../../_bundle/noop_6676";
const useStyles = createStyles({
  list: {
    flex: 1,
    marginTop: 12
  },
  listContent: {
    paddingBottom: 88
  },
  loadingContainer: {
    paddingVertical: 80,
    alignItems: "center"
  },
  header: {
    paddingHorizontal: GUTTER_SIZE,
    paddingTop: 10,
    paddingBottom: 5
  }
});
let Component = Module19.memo(function({ header }) {
  return <View style={useStyles().header}>
    <Heading variant="heading-sm/medium" color="mobile-text-heading-primary">{header}</Heading>
  </View>;
});
export function EditCollectiblesPickerList(props) {
  let props2;
  let size;
  const { sections, selectedSkuId, renderRow, isFetching = false } = props;
  let c16138_3 = isFetching;
  let contentContainerStyle = props.contentContainerStyle;
  size = void 0;
  const styles = useStyles();
  let r0 = 0;
  const [state, setState] = useState(0);
  const callback = useCallback((a0) => {
    setState(a0.nativeEvent.layout.width);
  }, []);
  if (state > 0) {
    r0 = (state - 4 * GUTTER_SIZE) / ROW_SIZE;
  }
  size = r0;
  const memo = useMemo(() => {
    const r0 = [];
    if (c16138_3) {
      return r0;
    }
    let c26067_0 = r0;
    sections.forEach((section) => {
      c26067_0.push({
        type: "header",
        key: `header-${section.section}`,
        header: section.header
      });
      chunk(section.items, ROW_SIZE).forEach((item, index) => {
        c26067_0.push({
          type: "row",
          key: `row-${section.section}-${index}`,
          items: item
        });
      });
    });
    return r0;
  }, [sections, isFetching]);
  const callback2 = useCallback(({ item }) => item.type === "header" ? <Component header={item.header} /> : renderRow({
    items: item.items,
    size,
    selectedSkuId
  }), [renderRow, size, selectedSkuId]);
  const callback3 = useCallback((a0) => a0.type, []);
  const callback4 = useCallback((a0) => a0.key, []);
  const r54 = {
    style: null,
    children: null
  };
  if (isFetching) {
    r54.style = styles.loadingContainer;
    r54.children = <ActivityIndicator animating size="large" />;
    props2 = r54;
  } else {
    r54.style = styles.list;
    if (contentContainerStyle == null) {
      contentContainerStyle = styles.listContent;
    }
    r54.children = <BottomSheetFlashList data={memo} renderItem={callback2} getItemType={callback3} keyExtractor={callback4} extraData={selectedSkuId} contentContainerStyle={contentContainerStyle} onLayout={callback} keyboardShouldPersistTaps="always" />;
    props2 = r54;
  }
  return <View {...props2} />;
}