"use strict";

import { useContext, useRef, useState } from 'react';
import { Animated, View } from 'react-native';
import { ApplicationContext } from "../Context/index.js";
import styles from "./styles.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const INDICATOR_WIDTH = 24;
const INDICATOR_CONTAINER_WIDTH = 72;
const PaginationScroll = ({
  style,
  children,
  scrollViewRef
}) => {
  const {
    theme
  } = useContext(ApplicationContext);
  const left = useRef(new Animated.Value(0)).current;
  const [scrollViewWidth, setScrollViewWidth] = useState(0);
  const [scrollContentWidth, setScrollContentWidth] = useState(0);
  const translateX = () => {
    if (scrollViewWidth && scrollContentWidth) {
      const value = left.interpolate({
        inputRange: [0, scrollContentWidth - scrollViewWidth],
        outputRange: [0, INDICATOR_CONTAINER_WIDTH - INDICATOR_WIDTH],
        extrapolate: 'clamp'
      });
      return {
        transform: [{
          translateX: value
        }]
      };
    }
    return {};
  };
  const renderScrollView = () => {
    return /*#__PURE__*/_jsx(Animated.ScrollView, {
      ref: scrollViewRef,
      onScroll: Animated.event([{
        nativeEvent: {
          contentOffset: {
            x: left
          }
        }
      }], {
        useNativeDriver: true
      }),
      alwaysBounceHorizontal: false,
      showsHorizontalScrollIndicator: false,
      horizontal: true,
      style: styles.scrollView,
      onContentSizeChange: width => {
        setScrollContentWidth(width);
      },
      onLayout: e => {
        setScrollViewWidth(e.nativeEvent.layout.width);
      },
      children: children
    });
  };
  const renderIndicator = () => {
    return /*#__PURE__*/_jsx(View, {
      style: [styles.indicatorContainer, {
        backgroundColor: theme.colors.background.disable
      }],
      children: /*#__PURE__*/_jsx(Animated.View, {
        style: [styles.indicator, {
          backgroundColor: theme.colors.primary.default
        }, translateX()]
      })
    });
  };
  return /*#__PURE__*/_jsxs(View, {
    style: [style, styles.scrollContainer],
    children: [renderScrollView(), renderIndicator()]
  });
};
export default PaginationScroll;
//# sourceMappingURL=PaginationScroll.js.map