import { memo, useCallback, useEffect, useState } from 'react';
import { FlatList, View } from 'react-native';
import { useStyles } from './styles';
import { useGlobalStory } from '../../hooks/useGlobalStory';
import ContentLoader, { Circle } from 'react-content-loader/native';
import StoryCircleItem from './StoryCircleItem';
import Modal from 'react-native-modalbox';
import StoryTargetView from './StoryTargetView';
import { useTheme } from 'react-native-paper';
import useAuth from '../../../core/hooks/useAuth';
const MyStories = () => {
  const styles = useStyles();
  const theme = useTheme();
  const {
    getGlobalStoryTargets,
    globalStoryTargets,
    loading,
    globalStoryTargetsOnNextPage
  } = useGlobalStory();
  const [currentCommunityIndex, setCurrentCommunityIndex] = useState(0);
  const [viewStory, setViewStory] = useState(false);
  useEffect(() => {
    getGlobalStoryTargets();
  }, [getGlobalStoryTargets]);
  const onPressStoryView = useCallback(storyTarget => {
    setViewStory(true);
    const currentIndex = globalStoryTargets.findIndex(target => target.targetId === storyTarget.targetId);
    setCurrentCommunityIndex(currentIndex);
  }, [globalStoryTargets]);
  if (loading && !globalStoryTargets) {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.skeletonContainer
    }, Array.from({
      length: 6
    }, (_, index) => {
      return (
        /*#__PURE__*/
        // eslint-disable-next-line react-native/no-inline-styles
        React.createElement(View, {
          style: {
            padding: 10
          },
          key: index
        }, /*#__PURE__*/React.createElement(ContentLoader, {
          height: 70,
          speed: 1,
          width: 70,
          backgroundColor: theme.colors.baseShade4,
          foregroundColor: theme.colors.baseShade2,
          viewBox: "0 0 50 50"
        }, /*#__PURE__*/React.createElement(Circle, {
          cx: "25",
          cy: "25",
          r: "25"
        })))
      );
    }));
  }
  if (globalStoryTargets && globalStoryTargets.length > 0) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
      style: styles.container
    }, /*#__PURE__*/React.createElement(FlatList, {
      showsHorizontalScrollIndicator: false,
      onEndReached: globalStoryTargetsOnNextPage,
      contentContainerStyle: styles.scrollContainer,
      horizontal: true,
      data: globalStoryTargets,
      renderItem: ({
        item: storyTarget
      }) => {
        return /*#__PURE__*/React.createElement(StoryCircleItem, {
          onPressStoryView: onPressStoryView,
          storyTarget: storyTarget
        });
      },
      keyExtractor: item => item.targetId
    })), /*#__PURE__*/React.createElement(Modal, {
      style: styles.modal,
      isOpen: viewStory,
      onClosed: () => setViewStory(false),
      position: "center",
      swipeToClose: true,
      swipeArea: 250,
      backButtonClose: true,
      coverScreen: true,
      animationDuration: 600
    }, /*#__PURE__*/React.createElement(StoryTargetView, {
      currentCommunityIndex: currentCommunityIndex,
      setCurrentCommunityIndex: setCurrentCommunityIndex,
      globalStoryTargets: globalStoryTargets,
      setViewStory: setViewStory,
      onClose: getGlobalStoryTargets
    })));
  }
  return null;
};
export const AmityGlobalStoryTabWrapper = ({
  children
}) => {
  const {
    globalStoryTargets,
    getGlobalStoryTargets
  } = useGlobalStory();
  const {
    sessionState
  } = useAuth();
  useEffect(() => {
    if (sessionState === 'established') {
      getGlobalStoryTargets();
    }
  }, [sessionState, getGlobalStoryTargets]);
  return /*#__PURE__*/React.createElement(View, {
    style: {
      height: globalStoryTargets.length > 0 ? 113 : 0
    }
  }, children);
};
export default /*#__PURE__*/memo(MyStories);
//# sourceMappingURL=index.js.map