import { View, Animated, Easing, Modal, Pressable, TouchableOpacity, Text } from 'react-native';
import { Fragment, memo, useCallback, useEffect, useRef, useState } from 'react';
import { useStyles } from './styles';
import { ComponentID, PageID } from '../../enums';
import { useAmityPage, useCommunity, useStoryPermission } from '../../hooks';
import AmityCommunityHeaderComponent from './components/Header';
import AmityCommunityFeedComponent from './components/Feed/Feed';
import AmityCommunityProfileTabComponent, { CommunityProfileTab } from './components/Tab';
import AmityCommunityImageFeedComponent from './components/ImageFeed';
import AmityCommunityVideoFeedComponent from './components/VideoFeed';
import { TopBar } from './components';
import CommunityCreatePostButton from '../../elements/CommunityCreatePostButton/CommunityCreatePostButton';
import { SvgXml } from 'react-native-svg';
import { useBehaviour } from '../../providers/BehaviourProvider';
import { livestream, poll, post, story } from '../../../core/assets/icons';
import { useNavigation, useRoute } from '@react-navigation/native';
import { useTheme } from 'react-native-paper';
import AmityCommunityPinnedPostComponent from './components/PinnedPost/PinnedPost';
import { usePostPermission } from '../../../social/hooks/usePostPermission';
import { serializeCommunity } from '../../../social/utils';
const AmityCommunityProfilePage = ({
  defaultCommunityId
}) => {
  var _route$params;
  const pageId = PageID.community_profile_page;
  const {
    accessibilityId,
    themeStyles
  } = useAmityPage({
    pageId
  });
  const route = useRoute();
  const routeCommunityId = route === null || route === void 0 || (_route$params = route.params) === null || _route$params === void 0 ? void 0 : _route$params.communityId;
  const navigation = useNavigation();
  const [communityId, setCommunityId] = useState();
  const [currentTab, setCurrentTab] = useState(CommunityProfileTab.community_feed);
  const [headerHeight, setHeaderHeight] = useState(0);
  const [isScrolledPastHeader, setIsScrolledPastHeader] = useState(false);
  const [isScrolling, setIsScrolling] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const animatedOpacity = useRef(new Animated.Value(0)).current;
  const animatedTranslateY = useRef(new Animated.Value(15)).current;
  const stickyHeaderAnimation = useRef(null);
  const scrollY = useRef(new Animated.Value(0)).current;
  const feedRef = useRef(null);
  const styles = useStyles(themeStyles);
  useEffect(() => {
    const routes = navigation.getState().routes;
    if (defaultCommunityId && routes.length === 1) {
      setCommunityId(defaultCommunityId);
    } else if (routeCommunityId) {
      setCommunityId(routeCommunityId);
    }
    return () => {
      setCommunityId(undefined);
    };
  }, [defaultCommunityId, routeCommunityId, navigation]);
  useEffect(() => {
    if (isScrolledPastHeader) {
      // Reset animation values
      animatedOpacity.setValue(0);
      animatedTranslateY.setValue(15);

      // Run entrance animation
      stickyHeaderAnimation.current = Animated.parallel([Animated.timing(animatedOpacity, {
        toValue: 1,
        duration: 200,
        useNativeDriver: true
      }), Animated.timing(animatedTranslateY, {
        toValue: 0,
        duration: 250,
        easing: Easing.out(Easing.ease),
        useNativeDriver: true
      })]);
      stickyHeaderAnimation.current.start();
    }
    return () => {
      var _stickyHeaderAnimatio;
      (_stickyHeaderAnimatio = stickyHeaderAnimation.current) === null || _stickyHeaderAnimatio === void 0 || _stickyHeaderAnimatio.stop();
    };
  }, [isScrolledPastHeader, animatedOpacity, animatedTranslateY]);
  const handleLoadMore = useCallback(() => {
    setIsLoadingMore(true);
    if (feedRef.current) {
      feedRef.current.handleLoadMore();
    }
    setTimeout(() => setIsLoadingMore(false), 2000);
  }, [feedRef]);
  const handleScroll = event => {
    const {
      contentOffset,
      layoutMeasurement,
      contentSize
    } = event.nativeEvent;
    const yOffset = contentOffset.y;
    const isPastHeader = yOffset >= headerHeight - 100;
    if (isPastHeader !== isScrolledPastHeader) {
      setIsScrolledPastHeader(isPastHeader);
    }
    if (yOffset > 0) {
      setIsScrolling(true);
    } else {
      setIsScrolling(false);
    }
    const isScrollEndReached = layoutMeasurement.height + contentOffset.y + 200 >= contentSize.height;
    if (isScrollEndReached && feedRef.current && !isLoadingMore) {
      handleLoadMore();
    }
  };
  const renderCommunityProfileTab = useCallback(() => {
    return /*#__PURE__*/React.createElement(AmityCommunityProfileTabComponent, {
      pageId: pageId,
      currentTab: currentTab,
      onTabChange: tab => {
        setCurrentTab(tab);
      }
    });
  }, [pageId, currentTab]);
  const renderTabComponent = () => {
    switch (currentTab) {
      case CommunityProfileTab.community_feed:
        return /*#__PURE__*/React.createElement(AmityCommunityFeedComponent, {
          pageId: pageId,
          communityId: communityId,
          ref: feedRef
        });
      case CommunityProfileTab.community_pin:
        return /*#__PURE__*/React.createElement(AmityCommunityPinnedPostComponent, {
          communityId: communityId
        });
      case CommunityProfileTab.community_image_feed:
        return /*#__PURE__*/React.createElement(AmityCommunityImageFeedComponent, {
          pageId: pageId,
          communityId: communityId,
          ref: feedRef
        });
      case CommunityProfileTab.community_video_feed:
        return /*#__PURE__*/React.createElement(AmityCommunityVideoFeedComponent, {
          pageId: pageId,
          communityId: communityId,
          ref: feedRef
        });
      default:
        return null;
    }
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, isScrolling && !isScrolledPastHeader && /*#__PURE__*/React.createElement(View, {
    style: styles.smallHeaderNavigationWrap
  }, /*#__PURE__*/React.createElement(TopBar, {
    pageId: pageId,
    componentId: ComponentID.community_header,
    communityId: communityId,
    isFromComponent: !!defaultCommunityId
  })), isScrolledPastHeader && /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.stickyHeaderContainer, {
      opacity: animatedOpacity,
      transform: [{
        translateY: animatedTranslateY
      }]
    }]
  }, /*#__PURE__*/React.createElement(AmityCommunityHeaderComponent, {
    pageId: pageId,
    communityId: communityId,
    isScrolled: true,
    isScrolling: isScrolling,
    isFromComponent: !!defaultCommunityId
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.smallHeaderCommunityTabWrap
  }, renderCommunityProfileTab())), /*#__PURE__*/React.createElement(Animated.ScrollView, {
    testID: accessibilityId,
    style: styles.container,
    accessibilityLabel: accessibilityId,
    onScroll: Animated.event([{
      nativeEvent: {
        contentOffset: {
          y: scrollY
        }
      }
    }], {
      useNativeDriver: true,
      listener: handleScroll
    }),
    scrollEventThrottle: 16
  }, /*#__PURE__*/React.createElement(AmityCommunityHeaderComponent, {
    pageId: pageId,
    communityId: communityId,
    onHeightChange: setHeaderHeight,
    isScrolling: isScrolling,
    isFromComponent: !!defaultCommunityId
  }), renderCommunityProfileTab(), renderTabComponent()), /*#__PURE__*/React.createElement(CommunityProfileActions, {
    pageId: pageId,
    styles: styles,
    communityId: communityId
  }));
};
export default /*#__PURE__*/memo(AmityCommunityProfilePage);
function CommunityProfileActions({
  pageId,
  communityId,
  styles
}) {
  const {
    community
  } = useCommunity(communityId);
  const {
    colors
  } = useTheme();
  const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false);
  const {
    AmityPostTargetSelectionPageBehavior,
    AmityPollTargetSelectionPageBehavior,
    AmityStoryTargetSelectionPageBehavior,
    AmityLivestreamPostTargetSelectionPageBehavior
  } = useBehaviour();
  const navigation = useNavigation();
  const {
    hasStoryPermission
  } = useStoryPermission(communityId);
  const hasPostPermission = usePostPermission({
    community
  });
  const openBottomSheet = () => setIsBottomSheetVisible(true);
  const closeBottomSheet = () => setIsBottomSheetVisible(false);
  const handleCreatePost = () => {
    closeBottomSheet();
    if (AmityPostTargetSelectionPageBehavior.goToPostComposerPage) {
      return AmityPostTargetSelectionPageBehavior.goToPostComposerPage({
        community,
        targetId: communityId,
        targetType: 'community'
      });
    }
    return navigation.navigate('CreatePost', {
      community: serializeCommunity(community),
      targetId: communityId,
      targetType: 'community'
    });
  };
  const handleCreateStory = () => {
    closeBottomSheet();
    if (AmityStoryTargetSelectionPageBehavior.goToStoryComposerPage) {
      return AmityStoryTargetSelectionPageBehavior.goToStoryComposerPage({
        targetId: communityId,
        targetType: 'community'
      });
    }
    navigation.navigate('CreateStory', {
      targetId: communityId,
      targetType: 'community'
    });
  };
  const handleCreateLivestream = () => {
    closeBottomSheet();
    if (AmityLivestreamPostTargetSelectionPageBehavior.goToCreateLivestreamPage) {
      return AmityLivestreamPostTargetSelectionPageBehavior.goToCreateLivestreamPage({
        targetId: communityId,
        targetType: 'community',
        targetName: community === null || community === void 0 ? void 0 : community.displayName
      });
    }
    navigation.navigate('CreateLivestream', {
      targetId: communityId,
      targetType: 'community',
      targetName: community === null || community === void 0 ? void 0 : community.displayName
    });
  };
  const handleCreatePoll = () => {
    closeBottomSheet();
    if (AmityPollTargetSelectionPageBehavior.goToPollPostComposerPage) {
      return AmityPollTargetSelectionPageBehavior.goToPollPostComposerPage({
        targetId: communityId,
        targetType: 'community',
        targetName: community === null || community === void 0 ? void 0 : community.displayName,
        community
      });
    }
    navigation.navigate('PollPostComposer', {
      targetId: communityId,
      targetType: 'community',
      targetName: community === null || community === void 0 ? void 0 : community.displayName,
      community
    });
  };
  if (!(community !== null && community !== void 0 && community.isJoined) || !hasPostPermission && !hasStoryPermission) return null;
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CommunityCreatePostButton, {
    pageId: pageId,
    onPress: openBottomSheet
  }), /*#__PURE__*/React.createElement(Modal, {
    transparent: true,
    animationType: "fade",
    visible: isBottomSheetVisible,
    onRequestClose: closeBottomSheet,
    statusBarTranslucent: true
  }, /*#__PURE__*/React.createElement(Pressable, {
    onPress: closeBottomSheet,
    style: styles.modalOverlay
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: styles.modalContent
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.dragHandle
  }), hasPostPermission && /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: handleCreatePost,
    style: styles.bottomSheetOption
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: post({
      fill: colors.base
    }),
    width: 24,
    height: 24
  }), /*#__PURE__*/React.createElement(Text, {
    style: styles.bottomSheetOptionText
  }, "Post")), hasStoryPermission && /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: handleCreateStory,
    style: styles.bottomSheetOption
  }, /*#__PURE__*/React.createElement(SvgXml, {
    width: 24,
    height: 24,
    xml: story({
      fill: colors.base
    }),
    fill: colors.base
  }), /*#__PURE__*/React.createElement(Text, {
    style: styles.bottomSheetOptionText
  }, "Story")), hasPostPermission && /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: handleCreatePoll,
    style: styles.bottomSheetOption
  }, /*#__PURE__*/React.createElement(SvgXml, {
    width: 24,
    height: 24,
    xml: poll(),
    color: colors.base
  }), /*#__PURE__*/React.createElement(Text, {
    style: styles.bottomSheetOptionText
  }, "Poll")), hasPostPermission && /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: handleCreateLivestream,
    style: styles.bottomSheetOption
  }, /*#__PURE__*/React.createElement(SvgXml, {
    width: 24,
    height: 24,
    xml: livestream(),
    color: colors.base
  }), /*#__PURE__*/React.createElement(Text, {
    style: styles.bottomSheetOptionText
  }, "Livestream"))))));
}
//# sourceMappingURL=index.js.map