"use strict";

import { useEffect, useRef, createElement as _createElement } from 'react';
import { Animated as AnimatedRN } from 'react-native';
import Item from "./Item.js";
import { SizedBox } from "../SizedBox/index.js";
import Animated, { FadeInRight, FadeInUp } from 'react-native-reanimated';
import styles from "./styles.js";
import { useGridSystem } from "./utils.js";
import { GridContext } from "../Context/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
const ContainerList = ({
  renderItem,
  widthSpan,
  heightSpan,
  margin = 0,
  padding = 0,
  gutter = 12,
  style,
  contentContainerStyle,
  horizontal,
  animationStyle = 'from-right',
  ...props
}) => {
  const {
    numberOfColumns,
    widthDevice
  } = useGridSystem();
  const widthSection = widthDevice - margin * 2;
  const totalGutterSize = gutter * (numberOfColumns - 1);
  const totalItemSize = widthSection - totalGutterSize - padding * 2;
  const sizePerSpan = totalItemSize / numberOfColumns;
  const refLength = useRef(0);
  const widthItem = widthSpan ?? numberOfColumns;
  const numColumns = horizontal ? 1 : Math.floor(numberOfColumns / widthItem);
  useEffect(() => {
    if (props?.data && props?.data?.length > refLength.current) {
      refLength.current = props?.data?.length;
    }
  }, [props?.data]);
  const _renderItem = data => {
    const Animation = animationStyle === 'from-right' ? FadeInRight : FadeInUp;
    return /*#__PURE__*/_jsx(Animated.View, {
      entering: Animation.duration(500).delay((data?.index - refLength.current) * 50),
      children: /*#__PURE__*/_jsx(Item, {
        widthSpan: widthItem,
        heightSpan: heightSpan,
        children: renderItem?.(data)
      })
    });
  };
  return /*#__PURE__*/_jsx(GridContext.Provider, {
    value: {
      numberOfColumns,
      gutter,
      sizePerSpan,
      getSizeSpan: span => {
        return span * sizePerSpan + (span - 1) * gutter;
      }
    },
    children: /*#__PURE__*/_createElement(AnimatedRN.FlatList, {
      ...props,
      key: `ItemList-${numColumns}`,
      horizontal: horizontal,
      numColumns: numColumns,
      renderItem: _renderItem,
      columnWrapperStyle: numColumns !== 1 && {
        gap: gutter
      },
      ItemSeparatorComponent: () => /*#__PURE__*/_jsx(SizedBox, {
        width: gutter,
        height: gutter
      }),
      style: [style, styles.protectedStyle, {
        width: widthSection,
        marginHorizontal: margin
      }],
      contentContainerStyle: [contentContainerStyle, styles.protectedStyle, {
        padding
      }]
    })
  });
};
export default ContainerList;
//# sourceMappingURL=ContainerList.js.map