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,
  onClose,
  duration,
  onStorySeen,
  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) => {
    var _item$stories;
    if ((item === null || item === void 0 || (_item$stories = item.stories) === null || _item$stories === void 0 ? void 0 : _item$stories.length) === 0) return;
    const newData = dataState.slice(index);
    setCurrentPage(0);
    setSelectedData(newData);
    setIsModalOpen(true);
  };
  useEffect(() => {
    if (data.length > 0) {
      setSelectedData([...data]);
    }
  }, [data]);
  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((storyData, index) => {
    return /*#__PURE__*/React.createElement(StoryListItem, {
      duration: duration * 1000,
      key: index,
      userId: storyData.user_id,
      profileName: storyData.user_name,
      profileImage: storyData.user_image,
      stories: storyData.stories,
      currentPage: currentPage,
      onFinish: onStoryFinish,
      onClosePress: () => {
        setIsModalOpen(false);
        if (onClose) {
          onClose(storyData);
        }
      },
      index: index,
      onStorySeen: onStorySeen,
      isModerator: storyData.isModerator
    });
  });
  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, null, /*#__PURE__*/React.createElement(StoryCircleListView, {
    handleStoryItemPress: _handleStoryItemPress,
    data: dataState,
    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