"use strict";

import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { Animated, View } from 'react-native';
import PagerView from 'react-native-pager-view';
import { ApplicationContext } from "../Context/index.js";
import { Styles } from "../Consts/index.js";
import styles from "./styles.js";
import TabItem from "./default.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
const TabView = /*#__PURE__*/forwardRef(({
  initialIndex,
  onPressTabItem,
  tabs,
  direction,
  style,
  tabBarStyles,
  contentStyles
}, ref) => {
  const pagerRef = useRef(null);
  const {
    theme
  } = useContext(ApplicationContext);
  const [containerWidth, setContainerWidth] = useState(undefined);
  const scrollX = useRef(new Animated.Value(0)).current;
  const itemWidth = containerWidth ? containerWidth / tabs.length : 0;
  const progress = useRef(new Animated.Value(0)).current;
  const [indexTab, setIndexTab] = useState(initialIndex ?? 0);
  const lazyRef = useRef([indexTab]).current;

  /**
   * forward ref to parent component
   */
  useImperativeHandle(ref, () => ({
    setPage: pagerRef.current?.setPage
  }));
  useEffect(() => {
    if (itemWidth) {
      progress?.addListener(({
        value
      }) => {
        if (value >= 0 && value <= tabs.length - 1) {
          scrollX.setValue(itemWidth * value);
        }
      });
      Animated.timing(scrollX, {
        toValue: itemWidth * indexTab,
        duration: 250,
        useNativeDriver: false
      }).start();
    }
  }, [scrollX, itemWidth, indexTab, progress, tabs.length]);
  const onPageScroll = e => {
    progress.setValue(e.nativeEvent.position + e.nativeEvent.offset);
  };

  /**
   * render content for tab view
   */
  const renderContent = () => {
    const useContent = !tabs.some(tab => tab.content === undefined);
    if (useContent) {
      return /*#__PURE__*/_jsx(AnimatedPagerView, {
        onPageScroll: onPageScroll,
        onPageSelected: e => {
          const next = e.nativeEvent.position;
          if (!lazyRef.includes(next)) {
            lazyRef.push(next);
          }
          if (indexTab !== next) {
            setIndexTab(next);
          }
        },
        ref: pagerRef,
        initialPage: indexTab,
        style: [Styles.flex, contentStyles],
        children: tabs.map((tab, index) => {
          if (lazyRef.includes(index)) {
            return /*#__PURE__*/_jsx(View, {
              children: tab.content
            }, `${tab.label}-${index}`);
          }
          return /*#__PURE__*/_jsx(View, {}, `${tab.label}-${index}`);
        })
      });
    }
    return null;
  };
  return /*#__PURE__*/_jsxs(View, {
    style: style,
    children: [/*#__PURE__*/_jsxs(View, {
      style: [styles.tabBar, tabBarStyles],
      onLayout: event => {
        const width = event.nativeEvent.layout.width;
        if (width !== itemWidth) {
          setContainerWidth(width);
        }
      },
      children: [tabs.map((tab, index) => {
        return /*#__PURE__*/_jsx(TabItem, {
          ...tab,
          direction: direction,
          active: index === indexTab,
          onPress: () => {
            pagerRef.current?.setPage(index);
            onPressTabItem?.(index);
          }
        }, `${tab.label}-${index}`);
      }), /*#__PURE__*/_jsx(View, {
        style: [styles.indicatorContainer, {
          width: itemWidth
        }],
        children: /*#__PURE__*/_jsx(Animated.View, {
          style: [styles.indicator, {
            left: scrollX,
            backgroundColor: theme.colors.primary.default
          }]
        })
      })]
    }), renderContent()]
  });
});
export { TabView };
//# sourceMappingURL=index.js.map