import { Fragment, useRef, useState, useEffect } from 'react';
import { Dimensions, View, Platform, StyleSheet } from 'react-native';
import Modal from 'react-native-modalbox';
import StoryListItem from './StoryListItem';
import StoryCircleListView from './StoryCircleListView';
import { isNullOrWhitespace } from './helpers';
import AndroidCubeEffect from './components/AndroidCubeEffect';
import CubeNavigationHorizontal from './components/CubeNavigationHorizontal';
const {
  height,
  width
} = Dimensions.get('window');
export const Story = ({
  data,
  unPressedBorderColor,
  pressedBorderColor,
  unPressedAvatarTextColor,
  pressedAvatarTextColor,
  style,
  onStart,
  onClose,
  duration,
  swipeText,
  avatarSize,
  showAvatarText,
  avatarTextStyle,
  onStorySeen,
  renderCloseComponent,
  renderSwipeUpComponent,
  renderTextComponent,
  loadedAnimationBarStyle,
  unloadedAnimationBarStyle,
  animationBarContainerStyle,
  storyUserContainerStyle,
  storyImageStyle,
  storyAvatarImageStyle,
  storyContainerStyle,
  avatarImageStyle,
  avatarWrapperStyle,
  avatarFlatListProps,
  isCommunityStory = false
}) => {
  const [dataState, setDataState] = useState(data);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState(0);
  const [selectedData, setSelectedData] = useState([]);
  const cube = useRef(null);

  // Component Functions
  const _handleStoryItemPress = (item, index) => {
    const newData = dataState.slice(index);
    if (onStart) {
      onStart(item);
    }
    setCurrentPage(0);
    setSelectedData(newData);
    setIsModalOpen(true);
  };
  useEffect(() => {
    handleSeen();
  }, [currentPage]);
  const handleSeen = () => {
    const seen = selectedData[currentPage];
    const seenIndex = dataState.indexOf(seen);
    if (seenIndex > 0) {
      var _dataState$seenIndex;
      if (!((_dataState$seenIndex = dataState[seenIndex]) !== null && _dataState$seenIndex !== void 0 && _dataState$seenIndex.seen)) {
        let tempData = dataState;
        dataState[seenIndex] = {
          ...dataState[seenIndex],
          seen: true
        };
        setDataState(tempData);
      }
    }
  };
  function onStoryFinish(state) {
    if (!isNullOrWhitespace(state)) {
      if (state === 'next') {
        const newPage = currentPage + 1;
        if (newPage < selectedData.length) {
          var _cube$current;
          setCurrentPage(newPage);
          cube === null || cube === void 0 || (_cube$current = cube.current) === null || _cube$current === void 0 || _cube$current.scrollTo(newPage);
        } else {
          setIsModalOpen(false);
          setCurrentPage(0);
          if (onClose) {
            onClose(selectedData[selectedData.length - 1]);
          }
        }
      } else if (state === 'previous') {
        const newPage = currentPage - 1;
        if (newPage < 0) {
          setIsModalOpen(false);
          setCurrentPage(0);
        } else {
          var _cube$current2;
          setCurrentPage(newPage);
          cube === null || cube === void 0 || (_cube$current2 = cube.current) === null || _cube$current2 === void 0 || _cube$current2.scrollTo(newPage);
        }
      }
    }
  }
  const renderStoryList = () => selectedData.map((x, i) => {
    return /*#__PURE__*/React.createElement(StoryListItem, {
      duration: duration * 1000,
      key: i,
      userId: x.user_id,
      profileName: x.user_name,
      profileImage: x.user_image,
      stories: x.stories,
      currentPage: currentPage,
      onFinish: onStoryFinish,
      swipeText: swipeText,
      renderSwipeUpComponent: renderSwipeUpComponent,
      renderCloseComponent: renderCloseComponent,
      renderTextComponent: renderTextComponent,
      onClosePress: () => {
        setIsModalOpen(false);
        if (onClose) {
          onClose(x);
        }
      },
      index: i,
      onStorySeen: onStorySeen,
      unloadedAnimationBarStyle: unloadedAnimationBarStyle,
      animationBarContainerStyle: animationBarContainerStyle,
      loadedAnimationBarStyle: loadedAnimationBarStyle,
      storyUserContainerStyle: storyUserContainerStyle,
      storyImageStyle: storyImageStyle,
      storyAvatarImageStyle: storyAvatarImageStyle,
      storyContainerStyle: storyContainerStyle,
      isCommunityStory: isCommunityStory
    });
  });
  const renderCube = () => {
    if (Platform.OS === 'ios') {
      return /*#__PURE__*/React.createElement(CubeNavigationHorizontal, {
        ref: cube,
        callBackAfterSwipe: x => {
          if (x !== currentPage) {
            setCurrentPage(parseInt(x, 10));
          }
        }
      }, renderStoryList());
    } else {
      return /*#__PURE__*/React.createElement(AndroidCubeEffect, {
        ref: cube,
        callBackAfterSwipe: x => {
          if (x !== currentPage) {
            setCurrentPage(parseInt(x, 10));
          }
        }
      }, renderStoryList());
    }
  };
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, {
    style: style
  }, /*#__PURE__*/React.createElement(StoryCircleListView, {
    handleStoryItemPress: _handleStoryItemPress,
    data: dataState,
    avatarSize: avatarSize,
    unPressedBorderColor: unPressedBorderColor,
    pressedBorderColor: pressedBorderColor,
    unPressedAvatarTextColor: unPressedAvatarTextColor,
    pressedAvatarTextColor: pressedAvatarTextColor,
    showText: showAvatarText,
    avatarTextStyle: avatarTextStyle,
    avatarWrapperStyle: avatarWrapperStyle,
    avatarImageStyle: avatarImageStyle,
    avatarFlatListProps: avatarFlatListProps,
    isCommunityStory: isCommunityStory
  })), /*#__PURE__*/React.createElement(Modal, {
    style: styles.modal,
    isOpen: isModalOpen,
    onClosed: () => setIsModalOpen(false),
    position: "center",
    swipeToClose: true,
    swipeArea: 250,
    backButtonClose: true,
    coverScreen: true
  }, renderCube()));
};
const styles = StyleSheet.create({
  modal: {
    flex: 1,
    height,
    width
  }
});
export default Story;
Story.defaultProps = {
  showAvatarText: true
};
//# sourceMappingURL=Story.js.map