"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _Typography = require("../../../core/components/Typography/Typography");
var _reactNativeSvg = require("react-native-svg");
var _icons = require("../../../core/assets/icons");
const VideoViewer = ({
  themeStyles,
  currentImageIndex,
  images,
  onNextImage,
  onPreviousImage,
  onClose = () => {}
}) => {
  var _themeStyles$colors;
  const [active, setActive] = (0, _react.useState)(currentImageIndex);
  const scrollViewRef = (0, _react.useRef)(null);
  const {
    width,
    height
  } = _reactNative.Dimensions.get('window');
  (0, _react.useEffect)(() => {
    if (scrollViewRef.current && active !== currentImageIndex) {
      scrollViewRef.current.scrollTo({
        x: width * currentImageIndex,
        animated: true
      });
      setActive(currentImageIndex);
    }
  }, [currentImageIndex, width, active]);
  const styles = _reactNative.StyleSheet.create({
    container: {
      position: 'absolute',
      // Make sure container fills the screen
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: '#000000'
    },
    scrollViewContainer: {
      flex: 1,
      width: '100%',
      height: '100%'
    },
    button: {
      position: 'absolute',
      top: 40,
      left: 16,
      height: 24,
      width: 24,
      backgroundColor: themeStyles === null || themeStyles === void 0 || (_themeStyles$colors = themeStyles.colors) === null || _themeStyles$colors === void 0 ? void 0 : _themeStyles$colors.baseShade4,
      borderRadius: 20,
      justifyContent: 'center',
      alignItems: 'center',
      // TODO: check if this is needed, because it has conflict with header component
      zIndex: 1001
    },
    indicatorText: {
      color: 'white'
    },
    image: {
      width: width - 40,
      height: height - 200,
      resizeMode: 'contain'
    },
    imageContainer: {
      width: width,
      height: height,
      justifyContent: 'center',
      alignItems: 'center'
    },
    counterContainer: {
      position: 'absolute',
      top: 40,
      alignSelf: 'center',
      backgroundColor: 'rgba(0,0,0,0.5)',
      paddingVertical: 5,
      paddingHorizontal: 15,
      borderRadius: 20
    }
  });
  const handleScroll = event => {
    const contentOffsetX = event.nativeEvent.contentOffset.x;
    const newIndex = Math.round(contentOffsetX / width);
    if (newIndex !== active) {
      setActive(newIndex);
      if (newIndex > active) {
        onNextImage();
      } else {
        onPreviousImage();
      }
    }
  };
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
    style: styles.button,
    onPress: onClose
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _icons.cross)()
  })), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.scrollViewContainer
  }, /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
    ref: scrollViewRef,
    horizontal: true,
    pagingEnabled: true,
    showsHorizontalScrollIndicator: false,
    onMomentumScrollEnd: handleScroll
    // contentContainerStyle={styles.scrollView}
    ,
    scrollEventThrottle: 16,
    decelerationRate: "fast"
  }, images.map((imageUrl, index) => /*#__PURE__*/React.createElement(_reactNative.View, {
    key: `image-${index}`,
    style: styles.imageContainer
  }, /*#__PURE__*/React.createElement(_reactNative.Image, {
    source: {
      uri: imageUrl
    },
    style: styles.image,
    resizeMode: "contain"
  }))))), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.counterContainer
  }, /*#__PURE__*/React.createElement(_Typography.Typography.Title, {
    style: styles.indicatorText
  }, `${active + 1}/${images.length}`)));
};
var _default = exports.default = VideoViewer;
//# sourceMappingURL=VideoViewer.js.map